动态需要图像在 reactjs/nextjs 中不起作用答案

【问题标题】：Dynamic require image is not working in reactjs/nextjs动态需要图像在 reactjs/nextjs 中不起作用
【发布时间】：2020-07-17 16:56:35
【问题描述】：

   {
       storedfiles.map(item => {
                        // return <li key={item.id}>{item.imagepath}</li>
                        return (
                            <div>
                            <li key={item.id}>{item.imagepath}</li>
                                <img src={require(`${item.imagepath}`)} style={{width:"100px" , height:'100px'}} alt='pics' />
                                </div>
                        )
                    })
                }

我正在从数据库中获取图像路径，即 { item.imagepath }，您可以在 img 标签中看到。它不工作，它说找不到那个模块。 “...小路” 但是当我把那条硬线路径放在变量的地方时，它会显示一个 img 。意味着硬绳值它正在工作，而变量它不是。怎么解决？

【问题讨论】：

这能回答你的问题吗？ React Native: require() with Dynamic String?
不，他们只是在他们的静态文件夹中有图像，他们试图通过使用 require 并将它们存储在另一个模块中的不同变量中然后访问它们来捕获它们，但在我的情况下我不能这样做.. . 我的图像路径来自 db，当为 n 时...
文件路径保存的场景是什么？ 1.全路径？ 2.相对文件路径？ 3.只有文件名+扩展名？
完整路径...从 C:/ 开始...

标签： reactjs next.js

【解决方案1】：

img

URL

模块

我们定义一个项目根文件夹而不是仅仅取自项目根文件夹之外的任何其他路径是有原因的。最好将您的图像放在 项目根文件夹 或使用 CDN 存储该图像并将完整路径如：https://cdn.com/path/to/image in prop src in tag img.
李>

希望有帮助！

【讨论】：

【解决方案2】：

谢谢大家... 这个问题解决了。

{

                storedfiles.map(item => {
                    return (
                        <div>
                        <li key={item.id}>{item.imagepath}</li>
                            <img src={process.env.PUBLIC_URL , `${item.imagepath}`} style={{width:"100px" , height:'100px'}} alt='pics' />
                            </div>
                    )
                })
            }

将图像存储在 reactjs 或 nextjs 项目的公共目录中，并通过 env 变量像这样访问它们。它的工作原理https://create-react-app.dev/docs/adding-images-fonts-and-files/

【讨论】：