Vue项目中直接引入图片报错（404 Not Found）

最新推荐文章于 2024-04-11 21:14:07 发布
最新推荐文章于 2024-04-11 21:14:07 发布
阅读量2.5k 收藏 3
点赞数 4
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71962268/article/details/127467608
版权

在view项目中引入图片，无法在网页上显示控制台报告404 not found的错误时的三种解决方法。2188e573552a48959c45111aa719f572.png

 方法一：在src的static文件夹中，把需要用到的音频或图片放里面8ee93e01e15345a78b8c6b498c7d4df7.png

 

更改路径

4fa5e530532e48a6b1a9337a46aaeb59.png

8e0bb618bcb14b3a915eb607a49fa609.png

 刷新

4053457e6e0044e6a7f8a90674f03fbd.png

47e926d27e5846cba22bd80bd7b4c9ff.png 

8a853234a624436b8219024c19268dda.png 

 视频和图片正常显示和播放。

方法二：在src的assets文件夹中，把需要用到的音频或图片放里面

729b42f9715e4404acad61e0134269d5.png

 更改路径f1104d81c38641debc9c14ea8023ad86.png

 突然报错了

70c1f57edebf4bdda280cd4b9211452a.png

 这里报错的原因是使用了相对路径

修改路径就可以了

6bdd7631fcd44aaaaaf26163672b205a.png

22bc8cc9c4aa4623b5a728e1e79ec49e.png 

 方法三：图片在/public目录下，把图片或音频放到与index.html同级的目录下

708423c7d5374f0bb7f29bf0f80d59eb.png

 修改路径

5e19c7f37edc4e54b2d735cdf3655aab.png

191e9270225246028200ec0417df2b83.png 

 ending~

 

*charming*
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
主要介绍了浅谈在vue-cli3项目中解决动态引入图片img404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
本篇文章主要介绍了用Vue-cli搭建的项目中引入css报错的原因分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
vue3+element plus+vite 引入本地静态资源图片require报错的原因和解决方案，以及如何在表格中展示图片
m0_52043522的博客
06-02 4133
在写vue 3+element plus+vite 项目的过程中，require引入展示图片出现了报错，记录了一下错误原因和解决方法。
vue中404解决方法
最新发布
m0_74359467的博客
04-11 376
检查服务器配置：如果你的Vue项目部署在服务器上，检查服务器的配置文件，例如nginx配置文件是否正确设置了路由重定向。确保服务器能够正确地处理所请求资源。检查是否正确安装依赖：如果使用了第三方库或组件，确保已经正确安装了相应的依赖。通常是因为找不到所请求的资源。请根据你的具体情况选择相应的解决方法。
vue 加载动态图片出错的三种解决方法
kkelim的博客
03-24 4113
由于解析问题，通常直接引用链接，图片会加载失败，通过学习，整理出以下三种解决错误的方法 <template> <div class="first"> <!-- 普通加载 （不显示）出错--> <img :src="imgarr[1]"> <!--第一种 在数据链接中用require("./1.jpeg")包裹链接 --> <img :src="imgarr[0]">
2022-12-07 工作记录--Vue-图片404（Not Found）
weixin_48850734的博客
12-07 1304
-Vue-图片404（Not Found）
vue引入图片报错？VueCli 关于静态资源(图片) 引入问题
韩旭的博客
02-24 1万+
文章目录一、关于Vue-Cli图片引入问题？二、两种引入方式三、相对路径动态时如何使用？四、背景图片background-image如何渲染？ 一、关于Vue-Cli图片引入问题？ 首先我们要清楚Vue-cli是基于Webpack来进行的打包，其次我们再来看一下Vue-cli的官网是如何给出我们的打包引入图片方式的。 二、两种引入方式 简单的来说 一种是相对引入方式，一种是绝对引入方式 相对引入： <img src="../assets/logo.png" alt="" />
vue 引入图片的问题
PBitW的博客
05-15 1184
为什么使用require 自己讲解 实例 - src下 - img 验证 实例 - public下 - 绝对路径 - img 报错，其中 imgurl5、imgurl6 找不到资源！ 去掉 imgurl5、imgurl6 再次运行（开发环境）： 去掉 imgurl5、imgurl6 再次运行（生产环境）： 发现 /static 这种写法生产环境并不正确 实例 - public下 - 相对路径 - img 结论 实例 - public下 - 背景 报错 bg2 的图片找不到 去掉 bg2 再次运行（开发环境）
vue | require动态加载图片及遇到的报错
weixin_44864257的博客
04-26 1586
2. require不能用纯动态地址，必须要有图片的 路径+名称+后缀。2. 视图加载的时候未拿到数据，可以用v-if判断一下。（require是node用来加载并执行其它文件导出的模块的方法。结果图片无法显示，遇到了以下提示，而且获取图片名字还需要截取。使用require将url转为base64。1. 查看图片路径是否写错。在弹窗用以上操作的时候出现以下报错。1. 把图片数组改为图片名字。
vue 图片加载及报错解决
LuckyisLhh的博客
01-26 598
vue 图片加载
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项目图片加载404（not found）问题，如何解决
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 2674
vue路径报404，解决方式
详解vue中引入stylus及报错解决方法
08-29
主要介绍了详解vue中引入stylus及报错解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue踩坑记-在项目中安装依赖模块npm install报错
10-17
主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决vue 项目引入字体图标报错、不显示等问题
12-02
问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错： 解决方法为：把字体引入方式改为...以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
vue 引入图片出现错误 Cannot find module ‘./XXX.jpg‘e
Python-PTA操作
11-05 1628
vue 引入图片出现错误 Cannot find module ‘./XXX.jpg‘e
vue 前端 require动态引入图片报错Error: Cannot find ‘@/static/image/xxx.png‘
GoAyano的博客
12-30 3223
vue 前端 require动态引入图片报错Error: Cannot find '@/static/image/xxx.png'
解决vue 直接图片引入报错问题
mentalitys的博客
01-08 2322
废话少说了，直接上代码 <div class="login_title"> <img :src="logo" class="mk_logo" /> </div> //方法1.直接将图片引入为模块 require imageSrc from "../assets/logo.jpg" //方法2.把图片放在数据中 export default { name: 'HelloWorld', data () { return { ..
vue项目如何解决 获取图片报错 403 (Forbidden)
05-13
出现 403 Forbidden 错误通常意味着你没有权限访问该资源。这可能是由于服务器配置或者你的请求不符合服务器的要求。 以下是一些可能的解决方案： 1. 确认图片地址是否正确，如果是一个 API 请求，确保请求参数正确。 2. 确认服务器是否正确配置了图片的访问权限，如果没有，联系服务器管理员进行配置。 3. 确认是否需要在请求头部添加合适的认证信息，例如 Token 或者 Cookie。 4. 确认是否需要在服务器端设置 CORS（跨源资源共享）策略，如果需要，联系服务器管理员进行配置。 5. 如果图片地址是一个相对地址，确保你的文件结构和路径正确。 以上是一些常见的解决方案，希望能帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

*charming*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值