I am trying to add svg as a background image and i am using a React-Native-Svg to generate my svg and I've been trying to add it onto
<ImageBackground source{{'<svg>...'}} />
But I cant manage to get a anywhere with it
If anybody could give pointers i would really appreciate it
As the documentation says you need to import the .svg file inside de Component:
import Logo from './logo.svg';
You can then use your image as a component:
<Logo width={120} height={40} />
From: https://github.com/react-native-community/react-native-svg#use-with-svg-files
Related
Trying to use skeleton as Next/Image loader. I am not trying to use react Suspense.
Unhandled Runtime Error
TypeError: customImageLoader is not a function
Code is
import Image from 'next/image';
import Skeleton from '#mui/material/Skeleton';
....
<Image loader={ <Skeleton />}
Skeleton
https://mui.com/material-ui/react-skeleton/
For a website using NextJS and Sanity.io,
I am importing an image locally
import large_logo from '../../assets/logo-large-1200x630.svg
and am calling it inside an img tag as src
<img src={large_logo}/>
However, the image is broken and not displayed.
The HTML is rendered as
<img src="[object Object]">
The only solution to this problem was to call the src of the "object"
<img src={large_logo.src}/>
However vanilla React does not require us to call the src.
Does importing not work when using NextJS and Sanity?
For Next.js you have to do something like this:
/* import Image component */
import Image from 'next/image';
/* import the required svg file */
import large_logo from '../../assets/logo-large-1200x630.svg
and then in JSX
<Image src={large_logo} />
When you are using Next.js and wanna render an image that the size is more than 40*40(pixels) need to import the <Image /> component from next/image.
That component optimize your image and render in your Application. So follow the example below to help yourself..
import Image from 'next/image';
import large_logo from '../../public/logo-large-1200x630.svg
inside your component you can add this code snipet for your image
<Image src={large_logo} alt="logo" width={200} height={100} quality={100} />
First of all you need to change the image directory of the image and put it in your public directory of your App, cause this is the default behaviour that Next.js needs for the images.
Inside your component you need to pass the src value, alt value and usually height - width prop or layout prop.
You can also need the official documentation for the of Next.js : https://nextjs.org/docs/api-reference/next/image
I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div
I'm having a problem with importing SVG files in React JS.
import { ReactComponent as Logo} from '../logo.svg'
i don't know why but in some components <Logo /> will render correctly
while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.
anyone else encountered this issue?
Try:
import { default as logo } from '../logo.svg';
and use as source in a node of type img, like this:
<img src={logo} />
I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.
import { ReactComponent as Logo} from '../logo.svg'
<svg><Logo fill="blue" width="100%" height="100%" /></svg>
// or...
<div><Logo fill="blue" width="100%" height="100%" /></div>
Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.
I had same problem, for some it was how i imported them so I resolved this by using:
import {ReactComponent as Icon} from 'pathtoyourfile.svg
then use as:
<Icon />
Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?
You could do it like so
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I checked, only create-react-app could use SVG as a component
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Note: this feature is available with react-scripts#2.0.0 and higher,
and react#16.3.0 and higher.
I am using SvgIcon in a react app from material-ui https://material-ui.com/api/svg-icon/. All examples in the document are <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />. I don't know what it is. How can I use this component to render a svg from external file?
I have checked this post How to use an SVG file in a SvgIcon in Material-UI but it doesn't give an answer to load external files.
There is no way to use Path to load external svg. You should use <img /> inside de <Icon> according to this answer in github:
In the '#Christos-Lytras' answer there is an example on how to do it
You may import svg icon as a react component and use this component wrapped inside the SvgIcon component:
import { ReactComponent as Car } from './icons/car.svg'
...
<SvgIcon>
<Car />
</SvgIcon>