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

Posted 2023-02-23

【中文标题】Vue.js 找不到图像 [关闭]

【英文标题】：Vue.js cannot find images [closed]

【发布时间】：2019-12-10 04:31:53

【问题描述】：

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

第一张图片（结构） 第二张图片（模板） 第三张图片（脚本） 第四张图片（结果）

【问题讨论】：

请不要添加图片。添加代码。

如果没有修改其他vue cli配置，你应该使用/images/flag-1.png。

【参考方案1】：

您必须执行以下步骤：

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

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

Image 1

使用局部变量设置引用：

userimage: userimage, botimage: botimage,

Image 2

在 html 中使用它们，例如：

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

Image 3

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

【参考方案2】：

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

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