vue项目引入图片 404 not found 报错

最新推荐文章于 2024-01-10 10:32:29 发布

灵灵7

最新推荐文章于 2024-01-10 10:32:29 发布

阅读量6.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_41796631/article/details/89249895

vue 专栏收录该内容

68 篇文章

订阅专栏

在Vue项目中遇到图片404 not found错误，解决方案是将图片移动到static文件夹下，并创建img子文件夹，然后更新图片路径。确保图片不再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 代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue_addname</title>

  </head>
  <body>
<div id="app">
  html网页 内容

  <router-link to="/Hello"><img src="static/img/logo.png" :onerror="defaultImg"></router-link>
  </br>
  <router-link to="/todolist">Make the to do list</router-link>

  <router-view></router-view>
  html网页 内容
</div>

<script type="text/javascript">
</script>

  </body>
</html>
图片成功加载