错误：在 react.js 上找不到模块“./img.jpg”

Question

在 react 的一个功能组件中，我试图使用来自 props 的图像的 URL 和代码<img src={require(productUrl).default}/> （这里的 productUrl 来自 props）但是有一个找不到模块的错误我还为 productUrl 做了一个控制台日志，它打印了预期值，当我在 require 中硬编码 url 的值时，它工作正常，但我不能使用硬编码值，因为 URL 来自 props

Answer 1

You do not need to use require within React Component. Try to directly use your prop in the img src . Something like this:

<img src={productUrl} alt="my image"/>

Considering productUrl contains the correct url source for the image :)

Since, you have not added any code in the question. Hope this article would be useful as per your requirement from BetterProgramming.pub betterprogramming.pub/how-to-display-images-in-react

UPDATE: After getting idea from Comment Sections After getting the codebase, I have fixed the issues with this.

CodeSandBox Link: https://codesandbox.io/s/issuewithimage-qmkpg

Some of the major issue were:

1. products array were wrongly exported as a function while we could directly export them and we do not need any function.
2. Since you are using local images in this case we must make sure we place them in the public folder and do not use relative path (which leads to issues).So place all the images that you wish to use in public folder as I have done and use same names in your products array.
3. Rest you may figure out from the code. :D

CHEERS !!!