javascript - Vue.js 找不到图片

Question

我使用 Vue-CLI。Vue 最新版本 (3.9.3)。Vue 找不到我的图像。我附上了一些截图。为什么图片不显示？

1. 第一张图片（结构）
2. 第二张图片（模板）
3. 第三张图片（脚本）
4. 第四张图片（结果）

标签： javascriptvue.jswebpackvuejs2vue-component

Answer 1

您必须执行以下步骤：

1. 您需要像这样在组件中导入图像：

import userimage from "@/assets/images/user-1.png";

图 1

2. 使用局部变量设置引用：

userimage: userimage, botimage: botimage,

图 2

3. 在 HTML 中使用它们，例如：

<img :src="userimage" alt="image"> <img :src="botimage" alt="image">

图 3

所以基本上你是在导入它们并在模板中使用它们，就这么简单。