Vue.js 找不到图像 [关闭]

Question

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

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

Answer 1

您必须执行以下步骤：

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

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

Image 1

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

userimage: userimage, botimage: botimage,

Image 2

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

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

Image 3

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

Answer 2

对于img 标签中的src 属性，您可以像这样使用require("@/assets/logo.jpg")：

<img :src="require('@/assets/logo.png')">