score:3
problem
you need to change the way you are importing the images:1. import an image from the same source directory:
import img from "/path/to/image.svg"
<img src={img}/>
2. import an image from the public folder:
<img src="/path/to/image.svg"/>
solution:
if you want to import images dynamically and you are using webpack
, you can use require.context:
const svgdir = require.context("!@svgr/webpack!../images");
then:
<img src={svgdir(`./${weather?.weather[0].icon}.svg`)}/>
score:0
a quick tip on how to fix this can be found here --> https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/
i believe the problem is with the svg itself. if you open the svg in the browser and inspect the code you will see the svg contains just a base64 encoded png http://staging.flagstaff.ab.ca/templates/base/images/page-bg.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1922" height="432" viewbox="0 0 1922 432">
<image id="swoosh" width="1922" height="432" xlink:href="data:img/png;base64,=====long base 64 encode here=====" >
</svg>
maybe some browsers/os have problems in rendering the svg in this way.
since it is not a real svg just convert it in png and use the png instead. or include the base64 directly in your css by changing
background-image: url('your-file.svg');
with
background-image: url('data:img/png;base64,=====long base 6
so...
xlink:href="data:img/png;base64,
to:
xlink:href="data:image/png;base64,
check this response --> chrome not rendering svg referenced via <img> element
Source: stackoverflow.com
Related Query
- React/Ionic: Not rendering SVG via <img/> tags
- svg not rendering correctly when used with by multiple react components
- React facebook share not working on open graph meta tags with server side rendering
- d3 svg not rendering on initial component render. React
- img element is not working in Ionic React
- react js svg linearGradient not rendering correct value
- Tags not rendering in React
- Warning: Functions are not valid as a React child, using a conditional rendering
- Simple React component not rendering
- React rendering SVG overwrites other SVGs on the page
- Webpack 4 and react loadable does not seems to create correct chunk for server side rendering
- Getting undefined is not an object in React native when rendering
- HTML special character (& symbol) not rendering in React component
- Touchable opacity on press not working inside SVG tags
- React history.push() not rendering new component
- react component not rendering on my view
- React memo keeps rendering when props have not changed
- React leaflet not rendering properly
- React SVG tag name provided is not valid
- React not rendering classes on elements
- uri image is not rendering in React native Image view
- React SVG import as a Component does not render
- React SVG not showing
- My animation is not working when re rendering my react component?
- React img not immediately changing when src changes. How can I fix this?
- React Router v4 not rendering components
- React fontawesome 5 SVG not rerendering
- Google Map is Not Rendering in React App
- React Helmet not updating meta tags
- Conditional Rendering in React won't work, state not working properly?
More Query from same tag
- React Dropzone FileReader - cannot read as File: {}
- How do I fix a component is changing from controlled input of the type text to be uncontrolled. Reactjs Error
- onClick() works on the first click only - React
- How to set up a custom filtering in ReactTable?
- Need help in React Saga Unit test
- react-bootstrap-table sorting does not work properly on number field
- React Inline BackgroundImage with Media Queries
- About useSelector equality check
- How to resize width of Ant Design modal based on different screen sizes?
- How to pass data into options in <Form.Select> </Form.Select> with Semantic UI React?
- React Router sending a state
- How to select element value without attaching state
- Handling fetched objects in React components
- Proper way to pop from a react component's array-type state attribute?
- How to resolve React DateTimePicker returning SyntheticBaseEvent value onChange
- drop shadow not showing when scrolled in react
- Array key does not get interpolated when making object
- Importing multiple files in react
- Variables in react props
- i am trying to store the photo in the database (firebase) and in the storage. the photo got store in the Storage, but not added in the firestore
- How to delete The array item in react js?
- How to know if an array is Empty?
- Omitting an optional parameter, which is before another optional parameter in React Router
- How do I wrap link router with back-ticks to a card and pass a variable to it Reactjs?
- Pass functional component to Animated.createAnimatedComponent
- How to add or insert data in 2 different collections using Mongodb Expressjs React js and Nodejs?
- React algirthm - recursive prepend and append
- How to prevent reRender of React const which uses useState
- How to clone a prop and change a specific data
- Cannot subscribe react-redux state in reactotron on ubuntu