Vuejs 组件图像源与 props 连接

Question

我想显示一个图标，其名称文件是从 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')" />

在要求中工作正常，只要这不是我的变量。

我不断收到错误，具体取决于我正在尝试的版本。

最常见的错误之一是：

./src/assets/stop16.ico 1:0 中出现错误 模块解析失败：意外字符 '' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略源代码）

“stop16.ico”是资产文件夹中的另一个图标，我不知道它是如何获取它的，因为我什至没有使用它。

知道什么可以拯救我吗？

Answer 1

我不明白为什么你首先需要一个

require(...)

电话。您需要的是形成一个有效的网址并实际将图像上传到那里。我可以建议几个选项（无论 vue 版本如何）：

1 - 只需将完整/绝对路径分配给数据源中的

icon

变量，传递已形成的图像网址并让浏览器完成其工作；

2 - 在计算变量中形成完整/绝对路径并绑定该变量；

3 - 将图像放在 vue 文件旁边，然后导入图像并在模板中使用它；

// vue2 example code
...
<template>
  <img v-bind:src="$options.icon" />
</template>

import icon from './icon.png';
...
export default {
...
   icon,
...
}