将图像动态插入到 React 组件中

Question

I'm trying to create a simple weather app. It gets an API response where weather description is represented by some string, ie "clear sky". I've created js object corresponding that strings to icon's files paths which are in src/assets/images folder:

const weatherIcons = {
  // ...
  "Heavy_Rain": "../assets/images/icons8-heavy-rain-96.png",
  // ...
}

I'm trying to dynamically display that icon in my component:

<img className="img-fluid" src={require(weatherIcons.Heavy_Rain)} />

And I got error:

Error: Cannot find module '../assets/images/icons8-heavy-rain-96.png'

But it works perfectly if I use string directly as a require argument:

<img className="img-fluid" src={require("../assets/images/icons8-heavy-rain-96.png")} />

I use Parcel istead of Webpack to bundle project files. And I didn't run Create React App, so I don't have Public folder in my project.

What do I do to have my icons displayed eventually?

Answer 1

This is happening at runtime:

require(weatherIcons.Heavy_Rain)

This happens at compile:

require("../assets/images/icons8-heavy-rain-96.png")

So you will need a public folder for dynamic or some public link with the image.

If your homepage is set to "." and put the image in the public folder it should work.