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

Question

我正在尝试使用 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')）时，不会发生同样的错误。

如何解决这个问题？

Answer 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} />

令我非常惊讶和欣慰的是，这非常有效。