在 React 中引用目录中图像的路径时未找到模块错误

Question

我是 React 的新手，只有大约 4 个月的经验，在引用与以下代码相同的目录中的一组图像时遇到问题，以便在网页上呈现它们。 每当我从 JSON 文件（作为 object，但仍然是一个字符串）传递它们的路径时，我都会收到模块未找到错误，当我通过我的 ZC1C425268E68385D14AB5074C17A 传递单个路径时一切正常

这是一张一张渲染图像的代码。

               <div className="cards col">
                    {Pagedproducts.map((item) => (
                        <div id="card" key={item.id}>
                            <div className="image">
                                <img
                                    className="prev"
                                    src={require(item.preview)}
                                    alt={"Image not rendering"}
                                />//item.preview returns a path for the image from this file's perspective
                            </div>
                        </div>
                    ))}
                </div>

使用相同的代码，但立即传递路径并在所有项目上渲染相同的图片 WORKS。 但我记录了 item.preview 变量，它实际上显示了传递给 require 函数的完全相同的路径。

<img src={require('./productPic/IMG-1.jpg')} /> //doing this works fine but it's not what i'm trying to do

我知道尝试解决此问题的其他方法，但它们都没有使用包含图像路径的 object。

当我运行我的代码时，我得到一个 Module not found 错误

未捕获的错误：找不到模块“./productPic/IMG-1.jpg”

我还尝试将其设为字符串并在其中传递变量

<img src={require(`${item.preview}`)} />

但这也行不通。

Answer 1

编译 React 代码后，它将在/public目录中查找任何图像。 将您的照片放入公共文件夹，它会工作。

这是工作示例。 代码框.io