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

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

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