importing image dynamically (React Js) (Require img path cannot find module)

user_1508492 0
Viewed 29673

I need to import images(several) from my image file dynamically by a map method. First, I want to set a base URL to my images file and then read the image's name from my JSON file which includes the image property and then set the image src accordingly. The JSON file is like below :

{
      "title": "Blue Stripe Stoneware Plate",
      "brand": "Kiriko",
      "price": 40,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "blue-stripe-stoneware-plate.jpg"
    },
    {
      "title": "Hand Painted Blue Flat Dish",
      "brand": "Kiriko",
      "price": 28,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "hand-painted-blue-flat-dish.jpg"
    },

my images folder : enter image description here

I have read the products by redux which is works perfectly =>

const products = this.props.products;
console.log(products, 'from redux'); 
const fetchProducts = [];
    for (let key in products) {
      fetchProducts.push({
        ...products[key]
      });
    }

the console.log() => enter image description here

Now I want to define a base URL like this which later use as image src by adding the image's name from the JSON file in the map method :

const baseUrl = '../../components/assets/images/';
const fetchProducts = [];
for (let key in products) {
  fetchProducts.push({
    ...products[key]
  });
}

const productCategory = fetchProducts.map((product, index) => {
  return (
    <Photo
      key={index}
      title={product.title}
      brand={product.brand}
      description={product.description}
      imageSource={baseUrl + product.image}
      imageAlt={product.title}
    />
  );
});

my Photo component looks like below :

  const photo = props => (
  <div className={classes.Column}>
    <img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
    <div className={classes.Container}>
      <p>{props.brand}</p>
      <p>{props.title}</p>
      <p>{props.price}</p>
    </div>
  </div>
);

export default photo;

unfortunately, I have faced this error: enter image description here Thanks in advance and sorry for my bad English :)

base-url reactjs ecmascript-6 javascript
6 Answers

Import is not working like that. You can use a base URL like that:

const baseUrl = "../../components/assets/images/";

Then you can pass to your Photo component like that:

<Photo
  key={index} // Don't use index as a key! Find some unique value.
  title={product.title}
  brand={product.brand}
  description={product.description}
  imageSource={baseUrl + product.image}
  imageAlt={pro.title}
/>;

Lastly, in your Photo component use require:

<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />

or like that:

<img src={require( "" + props.src )} alt={props.imageAlt} />

But, don't skip "" part or don't use it directly like:

<img width="100" alt="foo" src={require( props.src )} />

since require wants an absolute path string and first two do this trick.

user_70604410

Try this solution for dynamic image:-

**Componet**
const photo = props => (
    <div className={classes.Column}>
      <img src={require( `../../components/assets/images/${props.imageSource}`)} alt={props.imageAlt} />
      <div className={classes.Container}>
        <p>{props.brand}</p>
        <p>{props.title}</p>
        <p>{props.price}</p>
     </div>
   </div>
);

**Include Componet**
const productCategory = fetchProducts.map((product, index) => {
    return (
      <Photo
        key={index}
        title={product.title}
        brand={product.brand}
        description={product.description}
        imageSource={product.image}
        imageAlt={product.title}
      />
    );
});
user_198579090

So here is what I found and it worked for me.

"file-loader": "4.3.0" React: 16.12

Run this in your terminal:

npm run eject

Check file-loader in config/webpack.config and located file-loader configurations. What I did was, I created a directory called static/media/{your_image_name.ext} following the notation there:

options: {
    name: "static/media/[name].[hash:8].[ext]"
}

and then imported this image like

import InstanceName from "static/media/my_logo.png";

Happy Hacking!

user_46208070

After trying all kinds of solutions, including backticks <img src={require( `${ props.imageSource }` )} and others, nothing was working. I kept getting the error Cannot find module, even though my relative paths were all correct. The only primitive solution I found, if you have a relatively small number of possible images, is to predefine a Map that will map to the actual imports. (Of course this won't work for lots of images.)

import laptopHouse from '../../images/icons/laptop-house.svg'
import contractSearch from '../../images/icons/file-contract-search.svg'
..

const [iconMap, setIconMap] = useState({
                                'laptopHouse': laptopHouse, 
                                'contractSearch': contractSearch, 
                                ..
                              });

..

<img src={iconMap[props.icon]} />
user_10056070

i solved this typescript issue as follows in my project. hope this is helpful

export const countryData = {
'sl': { name: 'Sri Lanka', flag: '/flag-of-Sri-Lanka.png' },
'uk': { name: 'UK', flag: '/flag-of-United-Kingdom.png' },
'usa': { name: 'USA', flag: '/flag-of-United-States-of-America.png' },
'ca': { name: 'Canada', flag: '/flag-of-Canada.png' },
'It': { name: 'Italy', flag: '/flag-of-Italy.png' },
'aus': { name: 'Australia', flag: '/flag-of-Australia.png' },
'me': { name: 'Middle East', flag: '/flag-of-Middle-East.png' },
'other': { name: 'Other', flag: '/flag-of-World.png' }, };

"part of URL within Double quotes" + dynamic_URL_via_var combo worked for me.

<Avatar src={require('../assets'+countryData['uk']['flag'])} />
user_19251370

Even I got the same error

{gallery.map((ch, index) => {....

cannot find module '/../..................png'

I went wrong here, I used src instead of ch

Error
<Image src={src.image} />

Solved
<Image src={ch.image} />
user_110210220
Related