`require(variable)` 在 next-js 中不起作用

【问题标题】：`require(variable)` does not not work in next-js`require(variable)` 在 next-js 中不起作用
【发布时间】：2021-03-23 21:24:17
【问题描述】：

我正在尝试使用 next-optimised-images 模块渲染图像。当我尝试按如下方式添加图像时

<img src={require(c.logo)} alt={c.title} />

我收到以下错误

但是当我像这样对src 属性进行硬编码时

<img src={'courses' + require('../../../../mnt/nfs/a@a.com/export/dasdas22dsdd3322a/logo.png')} alt={c.title} />

效果很好。

当我在项目目录中使用具有图像相对路径的变量时不会发生相同的错误，例如require('../' + folder + '/img.png')。

如何解决这个问题？

【问题讨论】：

是否有任何原因导致运行时错误中的路径与硬编码 src 属性中的路径不同？使用console.dir(c.logo) 打印到控制台的内容是什么？
我刚刚将错误路径复制并粘贴到我的编辑器中。因此，任何文件夹上都有 3 个文件夹和代码中断，但是当我复制粘贴该路径时，它可以工作

标签： webpack next.js

【解决方案1】：

问题已解决，但解决方法很奇怪。我尝试了很多不同的方法比如

<img src={require(`${c.logo}`)} alt={c.title} />

-- 但他们没有工作。

然后我尝试通过添加局部变量logo = '../folder/logo.png' 并使用<img src={require(logo)} alt={c.title} /> 进行测试——当这也失败时，我感到震惊。然后我疯狂地按下ctrl + z 并保存——它正在工作。我注意到img是这样写的

<img src={require(\`../folder/${c.logo}\`)} alt={c.title} /> 
// c.logo was computed accordingly after copying the file to the relative path

然后我通过对路径进行硬编码来测试绝对路径 /mnt/nfs/... -- 令人惊讶...它正在工作。

疯狂的解决方案

我所做的只是 c.logo = c.logo.replace('/mnt/', ''); 并在渲染 img 时

<img src={require(`/mnt/${c.logo}`)} alt={c.title} />

令我大吃一惊和宽慰的是，这工作得非常好。

【讨论】：