带有导入图像的模板文字

Question

<img alt="placeholder" src={ALL.file1.default}></img>

上面的工作和渲染图片。

我尝试使用模板文字来使1成为一个动态变量。

<img alt="placeholder" src={`${ALL.file`${randomnum}`.default}`}></img>
<img alt="placeholder" src={ALL.file`${randomnum}`.default}></img>

这两个似乎都不起作用，因为我得到了一个错误

Attempted import error: 'file' is not exported from '../images/icons/' (imported as 'ALL').

我使用图像文件夹中的index.js导入了所有图片，分别导出所有图片，然后使用以下命令导入：

import * as ALL from "../images/icons/";

我是不是不正确地使用了模板文字，或者这与导入冲突的方法有关？

任何帮助都将不胜感激。

提前谢谢。

Answer 1

记住，当您使用动态属性时，您需要使用[]语法。

在您的示例中，它将如下所示：

<img alt="placeholder" src={ALL[`file${randomnum}`].default}></img>