Vue项目中直接引入图片报错（404 not found）_vue读取图片失败读取到localhost-CSDN博客

本文链接：https://blog.csdn.net/weixin_44588262/article/details/110474375

在Vue项目中遇到图片404 not found错误，将图片移动到static文件夹而非assets，更新图片路径，即可解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：在vue 项目中，引入的图片无法在网页显示控制台报错：图片地址 404 not found

解决方案：
把图片放在 static 文件夹，不要放在 assets 文件夹

在这里插入图片描述
index.html 代码：

<img src="./src/assets/img/logo.png" >

解决方案： 1. 把图片放在 static 文件夹，不要放在 assets 文件夹

我在 static 新建一个img 文件夹，并把 assets 文件夹中的图片搬了过去

在这里插入图片描述

2. 重新填写图片路径

<img src="static/img/logo.png" :onerror="defaultImg">

完整 index.html 代码

1.	<!DOCTYPE html>
2.	<html>
3.	  <head>
4.	    <meta charset="utf-8">
5.	    <title>vue_addname</title>
6.	 
7.	  </head>
8.	  <body>
9.	<div id="app">
10.	  html网页 内容
11.	 
12.	  <router-link to="/Hello"><img src="static/img/logo.png" :onerror="defaultImg"></router-link>
13.	  </br>
14.	  <router-link to="/todolist">Make the to do list</router-link>
15.	 
16.	  <router-view></router-view>
17.	  html网页 内容
18.	</div>
19.	 
20.	<script type="text/javascript">
21.	</script>
22.	 
23.	  </body>
24.	</html>