Menu
I've used <img src={require('./somRelativePath/image.jpg)} in React many times. However, this time it seems not to be working. There are no errors whatsoever (such as that the image was not found etc.) but the broken image on website.
After inspecting the element I was somewhat confused by the transpiled result in browser:
<img src="[object Module]" style="width: 5rem;">
It appears as if it loads the image as a component not the acutual file. I've created the app with npx create-react-app and haven't ejected it so far. So there is no error in babel or webpack configuration as it is currently handled by react under the hood.
Importing it with import statement works just fine:
import calendarPic from '../assets/pictures/calendar.svg';
Unfortunately that's not the solution because I have the local images saved in json and it would be definitely quite repetitive and ineffective as well to load all 50 images.
With the same npx create-react-app I've made a handful of mini-projects before but have never come across such a perplexing, yet so basic error. I'd be so thankful for any response as I've skimmed every possible solution throughout the internet.
Thank you again and have a lovely day!
413
Use a for loop and require image individually const imgFolder = './assets/'; const fs = require('fs'); fs. readdirSync(imgFolder). forEach(file => { const img_src = require(`${imgFolder}${file}`); return <img src={img_src}/>; }); This, however, raised an error of the form: the path './assets/brave.
require is not a React api, nor is it a native browser api (for now). require comes from commonjs and is most famously implemented in node.
To import and use an image in a React component:Import the local image, e.g. import MyImage from './thumbnail. webp'; . Pass the imported image to the src prop on the img element. For example, <img src={MyImage} alt="horse" /> .
use this one, it's work for me
<img src={require('./somRelativePath/image.jpg').default}
Explanation :
Value from let image1require('./somRelativePath/image.jpg') is different with
import calendarPic from './somRelativePath/image.jpg';
If you console them, value from calendarPic is a path, but if you use require, the value is an object like here.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
