Vuejs 组件图像源 concat 与 props

问：

我想显示一个图标，其中包含从 Vuejs 3 中的父组件收到的 props 给出的名称文件。 图标名称来自数据库，通过获取信息的方法。

这是我的脚本获取道具的部分：

<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())" />

我尝试将方法添加到组件方法列表中以连接并返回完整的字符串，并在 require 甚至直接使用它。 我尝试使用 v-bind、v-img、img，以及我在网上能找到的一切。

即使是像这样的猫：

<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”是资产文件夹中的另一个图标，我不知道它是如何获得的，因为我什至没有使用它。

知道什么可以救我吗？