Javascript 动态图像导入

所以我有一个组件，我需要使用28个以上选项的特定图像，所以我编写了两个函数，它们看起来像这样，来动态导入图像：

loadAvatar=imageName=>{
//导入化身图像文件并返回它
导入（`../../../img/avatars/${imageName}.svg`）。然后（image=>{
返回图像；
});
};
getAvatarIcon（图标、颜色）{
//使用端点响应中定义的化身图标和颜色返回正确的文件名
var avatarFileName=“化身”+图标+“+颜色；
返回此.loadAvatar（AvataFileName）；
}

我试着用这个来称呼它

this.getAvatarIcon（icon，color）}alt={name}className=“avatar”/>

但是，这不起作用，如何解决此问题？

尝试以下方法：

编辑您的

loadAvatar

功能以：

loadAvatar=imageName=>import（`../../../img/avatars/${imageName}.svg`）；

并编辑

getAvatarIcon

以：

异步getAvatarIcon（图标、颜色）{ //使用端点响应中定义的化身图标和颜色返回正确的文件名 var avatarFileName=“化身”+图标+“+颜色； 返回等待此。加载虚拟形象（虚拟形象文件名）； } 试试这个：

编辑您的

loadAvatar

功能以：

loadAvatar=imageName=>import（`../../../img/avatars/${imageName}.svg`）；

并编辑

getAvatarIcon

以：

异步getAvatarIcon（图标、颜色）{ //使用端点响应中定义的化身图标和颜色返回正确的文件名 var avatarFileName=“化身”+图标+“+颜色； 返回等待此。加载虚拟形象（虚拟形象文件名）； }

---

好的，所以我做了几件事：

• 切换到require（）而不是import（），以直接获取图像，而不是将其作为参数包含的对象
• 在ComponentDidMount（）而不是render（）方法中运行函数以防止无限循环
• 以状态保存图像并在my render（）中使用它，而不是返回函数值

下面是我的最终代码的样子

//装载时
componentDidMount（）{
this.getAvatarIcon（this.props.icon，this.props.color）；
}
异步getAvatarIcon（图标、颜色）{
//使用端点响应中定义的化身图标和颜色返回正确的文件名
var avatarFileName=“化身”+图标+“+颜色；
返回等待此。加载虚拟形象（虚拟形象文件名）；
}
异步加载虚拟形象（imageName）{
//导入化身图像文件并将其设置为组件状态
const avatar=await require（`../../../img/avatars/${imageName}.svg`）；
this.setState（{avatar}）；
}

在我的渲染中

---

好的，我做了几件事：

• 切换到require（）而不是import（），以直接获取图像，而不是将其作为参数包含的对象
• 在ComponentDidMount（）而不是render（）方法中运行函数以防止无限循环
• 以状态保存图像并在my render（）中使用它，而不是返回函数值

下面是我的最终代码的样子

//装载时
componentDidMount（）{
this.getAvatarIcon（this.props.icon，this.props.color）；
}
异步getAvatarIcon（图标、颜色）{
//使用端点响应中定义的化身图标和颜色返回正确的文件名
var avatarFileName=“化身”+图标+“+颜色；
返回等待此。加载虚拟形象（虚拟形象文件名）；
}
异步加载虚拟形象（imageName）{
//导入化身图像文件并将其设置为组件状态
const avatar=await require（`../../../img/avatars/${imageName}.svg`）；
this.setState（{avatar}）；
}

在我的渲染中

---

现在我正在运行并获取alt-text，也许我需要异步等待它？我刚刚尝试了这个实现，alt-text的相同行为，如果我记录loadAvatar中导入的内容，我可以看到正在记录待定的承诺，也许这就是需要异步的内容？啊，好的，现在我看到问题了。我认为您应该换一种方式，为显示图像创建一个单独的组件，并向其中传递一个特定的图像名称。我给你举了个例子：好吧，看起来不错。我只是不知道，你将只在组件中显示一个图像。现在我正在运行并获取alt-text。也许我需要异步等待它？我只是尝试了这个实现，与alt-text的行为相同，如果我记录loadAvatar中导入的内容，我可以看到正在记录的待定承诺，也许这就是异步的必要条件？啊，好吧，现在我明白了问题所在。我认为您应该换一种方式，为显示图像创建一个单独的组件，并向其中传递一个特定的图像名称。我给你举了个例子：好吧，看起来不错。我只是不知道，您将只显示组件中的一个图像。