vue项目图片加载404（not found）问题，如何解决

已于 2023-04-19 11:40:52 修改
阅读量3k 收藏 4
点赞数 6
分类专栏： 日常排错 文章标签： vue.js javascript 前端
于 2023-04-19 11:38:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59138504/article/details/130240044
版权

今天写一个课题项目，首页图片一直加载不出来，报404，我检查了路径等问题，没发现什么问题，但图片就是报路径问题。网上找了好多，但没几个好使（我是初学者，很多不太懂），在某位老哥的文章中找出来这个解决方法，使用require函数包裹加载路径，就好使了，咱也没学过require函数是什么，后来查了资料。
require是一个函数，用于在JavaScript中导入模块。它允许您将其他文件中定义的变量、函数和类引入到当前文件中，以便在当前文件中使用它们。在Node.js环境中，它可以用来加载NPM包和自己编写的模块。在浏览器中，require通常被替代为ES6的import语句。简单来说就是可以导入模块

以下是404问题和解决方式截图

在这里插入图片描述在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

桂花载酒少年游_
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中直接引入图片 报错（404 not found）
weixin_44588262的博客
12-02 1万+
问题：在vue 项目中，引入的图片无法在网页显示 控制台报错：图片地址 404 not found 解决方案： 把图片放在 static 文件夹，不要放在 assets 文件夹 index.html 代码： <img src="./src/assets/img/logo.png" > 解决方案： 1. 把图片放在 static 文件夹，不要放在 assets 文件夹 我在 static 新建一个img 文件夹，并把 assets 文件夹中的图片搬了过去 2. 重新填写图片路径 <i
vue使用技巧及vue项目中遇到的问题
08-27
在本文中，我们将讨论一些 Vue 使用技巧和在 Vue 项目中遇到的问题，并提供解决方案。 1. Vue 路由拦截浏览器后退实现表单保存 在路由组件中，我们可以使用 `beforeRouteLeave` 钩子函数来拦截浏览器的后退操作，...
解决vue v-for src 图片路径问题 404
10-16
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目中直接引入图片报错（404 Not Found）
weixin_71962268的博客
10-22 2654
在view项目中引入图片，无法在网页上显示控制台报告404 not found的错误时的三种解决方法。 方法一：在src的static文件夹中，把需要用到的音频或图片放里面 更改路径 刷新 视频和图片正常显示和播放。 方法二：在src的assets文件夹中，把需要用到的音频或图片放里面 更改路径 突然报错了 这里报错的原因是使用了相对路径 修改路径就可以了 方法三：图片在/public目录下，把图片或音频放到与index.ht
解决vue3项目打包后部署后某些静态资源图片不加载问题
最新发布
蒾酒的博客
05-12 832
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
踩坑日记：Vue启动加载图片出现404怎么解决
王声声的博客
05-23 1223
1、项目结构 2、img的路径引用 3、路径修改（在变量路径里加上require就OK了）
vue项目静态资源404报错(vue3)
beiTiao_lys的博客
03-22 1525
vue中静态图片404
vue中图片返回404时，显示默认的图片
weixin_30782293的博客
05-10 625
图片返回404时候的处理 <img :src="userMsg.portrait" ref="img" alt=""> _this.$refs.img.onerror = function(){ _this.userMsg.portrait = require('@/assets/images/user_img.jpeg') ...
vue动态加载图片地址时报错404的解决方案
weixin_57209852的博客
08-26 4540
vue中动态绑定图片报错404问题
Vue中用src引入图片404，用require引入可以加载
larea的博客
03-01 447
通过 require 引入即可加载图片。
vue 动态显示图片报错 404
liuxi_happy的博客
11-17 5089
<img :src="image"> 当我们动态加载图片的时候会出现如下图错误 1.第一种可能，是你写了相对路径引起的，你需要写绝对路径 image:'../../assets/image/top10-1.png' 你需要改成具体路径 image:'/src/assets/images/top10-1.png' 2.第二种解决方式你要使用require() <img :src="require(images)"> 3.第三种解决方式把图片放在public目录下面，但是这样虽然
vue GET http://localhost:8080/undefined/ 404 (Not Found)
赵达宇的博客
06-27 1927
具体来说，这里的data包含了两个东西：一个是redis缓存数据（也是就我们需要循环的数组)，一个是状态值success：true。我一开始以为，没从Redis取出来数据，但是当我用debug测试，发现，能够从Redis取出数据。检查后端代码，是这里统一返回类，返回data数据的时候，还加了success的状态。我在前端的时候，直接显示{{t}}的时候，我才看到明晃晃的 “true”。图片本来可以显示，但是加入Redis缓存后，就显示不了了。我看了N篇回答，并测试了，但都没解决问题。
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
基于elementUI的el-button的vue版404 500 403 页面
06-06
import NotFound from '@/components/404.vue' import ServerError from '@/components/500.vue' import Forbidden from '@/components/403.vue' const routes = [ // ...其他路由 { path: '*', component: ...
Vue2.0使用过程常见的一些问题总结学习
08-30
在遇到错误时，及时查阅文档、社区资源或使用开发者工具进行调试，是解决问题的关键。同时，随着Vue3.0的发布，许多API和最佳实践也在不断更新，开发者应保持学习和适应新技术的心态，以便更好地应对未来的挑战。
如何解决.vue文件url引用文件的问题
12-07
解决.vue文件url引用文件的问题 遇到的问题： 在css中引入图片，明明目录结构是对的，还是This dependency was not found； dev好好的，build 之后凉凉，图片加载404 添加图片路径配置 webpack 添加 alias //...
2022-12-07 工作记录--Vue-图片404（Not Found）
weixin_48850734的博客
12-07 1339
-Vue-图片404（Not Found）
vue项目本地开发完成后部署到服务器后报404
前端开发工程师博客
05-19 1376
面试官：vue项目本地开发完成后部署到服务器后报404是什么原因呢？ 一、如何部署 前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后，是生成一系列的静态文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9wiGIH7-1652929941320)(https://imgkr2.cn-bj.ufileos.com/b9d13e56-f859-4b4b-a9da-a703a34c2
vue接口获取数据后在v-for里面动态使用图片会报404的错误
stars______的博客
02-11 151
在图片外包一层require()就好了。
vue打包后 net::err aborted 404 (not found)
09-10
出现"vue打包后 net::err aborted 404 (not found)"错误通常有以下几种可能原因： 1. 资源路径错误：当Vue项目打包后，在部署时可能会出现资源路径错误的问题。在Vue项目中，资源文件（如图片、字体文件、CSS、JS等）通常在项目的`src`目录中，打包后会生成`dist`目录。如果在部署时没有正确配置服务器或web应用程序的路径，就会导致资源路径错误，从而出现404错误。解决方法是确保服务器或web应用程序的路径正确配置，使资源文件能够正确加载。 2. 缺少依赖文件：在打包Vue项目时，可能会由于一些依赖文件没有正确打包或上传到服务器而导致404错误。解决方法是检查是否将所有依赖文件正确打包，并确保它们都已被上传到服务器。 3. 路由问题：Vue项目通常使用路由来实现页面的跳转和切换。如果在打包后的文件中，路由配置出现错误或者缺失，就会出现404错误。解决方法是检查路由配置，确保所有页面都正确配置，并且在部署时配置正确的服务器路由重定向。 4. 服务器配置问题：如果在服务器上使用Vue的history模式进行部署，在没有正确配置服务器路由的情况下，可能会导致404错误。解决方法是在服务器上配置正确的路由规则，以确保Vue项目能够正常访问。 综上所述，出现"vue打包后 net::err aborted 404 (not found)"错误通常是由于资源路径错误、缺少依赖文件、路由问题或服务器配置问题导致的。解决方法是检查和调整资源路径、确保依赖文件正确上传、检查和修复路由配置，以及正确配置服务器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值