我想显示一个图标与从Vuejs 3中的父组件收到的 prop 给出的名称文件。图标名称来自一个DB通过一个方法获取信息。
以下是我的脚本获取 prop 的部分：

<script>
export default {
  props: ['id', 'name', 'icon']
}
</script>

字符串
这段代码在模板中运行良好（字符串中有给予名称）：

<img v-bind:src="require('../../assets/icon01.png')" />

型
这段代码在模板中运行良好（显示收到的图标名称）：

<br>Icon name : {{ icon }}

型
为了添加动态图像，我尝试了以下每一种组合：

<img v-bind:src="require('../../assets/' + this.icon)" />
<img :src="require(`../../assets/${this.icon}`)" />
<img v-bind:src="require(this.getIconName())" />

型
我试着在组件方法列表中添加一个方法来concat，并返回完整的字符串，然后在require中使用它，甚至直接使用它。我试着使用v-bind，v-img，img，所有我能在网上找到的东西。
即使是这样的concat：

<img v-bind:src="require('../../assets/' + 'icon01.png')" />

型
在require中，只要这不是我的变量，就可以正常工作。
我不断收到错误，这取决于我正在尝试的版本。
最常见的错误之一是：
./src/assets/stop16.ico中的错误1：0模块解析失败：意外字符“”（1：0）您可能需要适当的加载程序来处理此文件类型，当前没有加载程序配置为处理此文件。请参阅https://webpack.js.org/concepts#loaders（此二进制文件的源代码省略）
“stop16.ico”是资产文件夹中的另一个图标，我不知道它是如何得到它的，因为我甚至没有使用它。
你知道什么能保存我吗？