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

已于 2023-04-19 11:40:52 修改
阅读量4.3k 收藏 5
点赞数 9
分类专栏： 日常排错 文章标签： 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函数主要用于JavaScript中的模块导入，特别是在Node.js环境中加载NPM包和自定义模块。对于浏览器环境，常被ES6的import语句替代。

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

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

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

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

在这里插入图片描述

在这里插入图片描述

springboot+vue，上传图片，回显，以及报错404的问题
2301_76604664的博客
03-09 1536
最近遇到一个问题，上传图片到服务器以后，回显不了，报错404；
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
2022-12-07 工作记录--Vue-图片404（Not Found）
weixin_48850734的博客
12-07 1472
-Vue-图片404（Not Found）
Vue中用src引入图片404，用require引入可以加载
最新发布
larea的博客
03-01 563
通过 require 引入即可加载图片。
vue移动端项目使用vant的Image组件，src为本地图片报错404 (Not Found)
weixin_49021184的博客
06-10 670
require()为加载模块机制，在这相当于引入图片。
Vue项目中直接引入图片报错（404 Not Found）
weixin_71962268的博客
10-22 3198
在view项目中引入图片，无法在网页上显示控制台报告404 not found的错误时的三种解决方法。 方法一：在src的static文件夹中，把需要用到的音频或图片放里面 更改路径 刷新 视频和图片正常显示和播放。 方法二：在src的assets文件夹中，把需要用到的音频或图片放里面 更改路径 突然报错了 这里报错的原因是使用了相对路径 修改路径就可以了 方法三：图片在/public目录下，把图片或音频放到与index.ht
vue GET http://localhost:8080/undefined/ 404 (Not Found)
赵达宇的博客
06-27 2991
具体来说，这里的data包含了两个东西：一个是redis缓存数据（也是就我们需要循环的数组)，一个是状态值success：true。我一开始以为，没从Redis取出来数据，但是当我用debug测试，发现，能够从Redis取出数据。检查后端代码，是这里统一返回类，返回data数据的时候，还加了success的状态。我在前端的时候，直接显示{{t}}的时候，我才看到明晃晃的 “true”。图片本来可以显示，但是加入Redis缓存后，就显示不了了。我看了N篇回答，并测试了，但都没解决问题。
vue-route+webpack部署单页路由项目，访问刷新出现404问题
热门推荐
读书就是赚钱
04-12 2万+
问题描述：最近在开发cms的时候使用Vue.js框架，利用vue-route结合webpack编写了一个单页路由项目，自己在服务器端配置nginx。部署完成后，访问没问题，从页面中点击跳转也没问题，但是只要点击刷新或通过浏览器地址栏回车，就会出现404现象！在本地开发中是没有这个问题的，调试的时候一切都是正常的在服务器上 如直接访问地址：http://10.***.**.116:8081/home
vue 动态显示图片报错 404
liuxi_happy的博客
11-17 5354
<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中图片返回404时，显示默认的图片
weixin_30782293的博客
05-10 657
图片返回404时候的处理 <img :src="userMsg.portrait" ref="img" alt=""> _this.$refs.img.onerror = function(){ _this.userMsg.portrait = require('@/assets/images/user_img.jpeg') ...
解决vue v-for src 图片路径问题 404
10-16
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue打包项目后刷新404的问题
08-27
然而，当Vue项目被打包后，用户在浏览器中直接访问或刷新非根路由（如`/about`或`/contact`）时，可能会遇到404 Not Found错误。这是因为浏览器向服务器请求的是特定的路径，而服务器无法找到对应的静态资源。为了...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
通过上述步骤，我们可以确保Vue项目在Spring Boot环境中部署时，无论是首次加载还是刷新浏览器，都能正确加载静态资源，避免出现页面空白和404错误。请注意，每个项目的具体配置可能因环境而异，因此在实际操作中，...
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
解决Vue 项目打包后favicon无法正常显示的问题
10-18
本文将详细解析在Vue项目中解决favicon无法显示的问题。 首先，问题出现的根源通常与路径配置不当有关。在开发环境中，如果使用网络链接作为favicon的地址，一般来说不太可能出现问题。但是，如果使用本地图片作为...
问题解决：vue dev模式没问题，dist之后页面not found
Einstellung的博客
11-29 1212
导读： 本菜鸡作为一个JavaScript的初学者，搞了一个Vue页面之后想将其在生产环境中部署。但是dist之后发现生成的静态页面只有首页访问正常，其余页面全部都是Not Found，百思不得其解。经过调查解决了问题。将自己学习和思考过程记录下来，供后来的人一个参考。 SPA单页谈起 要想解决dist之后 not found问题，首先要理解Vue的SPA单页特性，首先来看一下SPA定义： 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用..
网页刷新后出现404
chuozongxiao7597的博客
04-10 4671
在linux下搭建nginx测试网页的时候，正常打开可以访问，当刷新后页面出现404 not found的问题 说明： vue-router默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 ...
VUE项目初始化报[404 Not Found - GET https://r.cnpmjs.org/xxxx]
xi_nuo的博客
12-18 1045
VUE项目初始化报[404 Not Found - GET https://r.cnpmjs.org/xxxx] 二、解决方案 出现如上情况，基本是未设置代理所致，所以可按如下步骤处理 1、检查当前代理情况，输入 npm config get proxy 如图所示，返回null，说明未设置代理 2、通过npm config set registry设置代理（一般取淘宝镜像） npm config set registry https://registry.npm.taobao.org
Apache部署Vue网站刷新页面出现404 Not found
qc15867301542的博客
12-24 2663
我的环境 Ubuntu18.04 + Apache + Vue3 问题描述 今天在把前端部署到服务器上时，碰到个奇怪的问题，明明在本地运行时能正常刷新的页面，到了Ubuntu服务器上后刷新后会跳出404 Page Not Found错误。排查后将解决方法锁定在Apache上。 问题解决 总结 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值