1

I am building a simple web app displays a panel of information for each item in a database. Part of this information is a picture that I would like to display alongside it.

This code in the panel component used to work fine:

<td>
  <img src={require(`../../../assets/images/${props.image_name}.png`)} />
</td>

However, I recently updated my modules and the images are now broken. Is there a new recommended way to do this?

Jambla
  • 368
  • 1
  • 5
  • 16

2 Answers2

1

The best way to do that should be this:

First: make index.js inside image folder then import all image

import img1 from "./image_name.jpg";
export const image_name = img1;

or

export const image_name = require("./image_name.jpg")

Second: import them like this:

import * as images from "../assets/img";

Last: use them like module

 images.image_name

Or

<img src={images[props.image_name])} />
b3hr4d
  • 4,012
  • 1
  • 11
  • 24
  • The problem here is that I have hundreds of images and I feel there should be a faster way that importing and exporting every single one and then using them like a module. – Jambla Jan 23 '21 at 17:50
  • take look at this :https://stackoverflow.com/questions/44607396/importing-multiple-files-in-react – b3hr4d Jan 23 '21 at 17:53
0

let filename = "flower.png"; retun <img src={/images/${filename}} />

ItSNeverLate
  • 533
  • 7
  • 8