2022-12-07 工作记录--Vue-图片404（Not Found）

已于 2022-12-07 21:43:35 修改
阅读量1.4k 收藏 2
点赞数 5
分类专栏： 工作-vue 文章标签： vue
于 2022-12-07 21:26:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/128227051
版权

一、报错

当我在HTML里直接写上图片地址时，发现引入的图片报404（Not Found），报错如下：👇🏻

在这里插入图片描述

先来看看我写的错误代码吧 ❌

  • 如下图，我们可以发现：其地址引入是正确滴，因为@相当于src，所以对应地址就是@/assets/img/startPage/card_${index}.png（index为0、1）

在这里插入图片描述

二、解决方法

那img为什么未显示出来呢❓

还要多谢优秀滴哥哥滴提醒，我这才想起来：

  • 在vue里，页面里的图片路径需要用require 引入才行~

现在小萝卜儿们🥕来看看我写的正确代码吧 ✅

在这里插入图片描述

<img :src="require(`@/assets/img/startPage/card_${index}.png`)" alt="">
哒哒哒哒~大功告成啦

在这里插入图片描述

小呀小萝卜儿
关注
专栏目录
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
electron-vue项目从搭建、运行到打包（以及electron-vue的bug修改）
欢迎来到iceseasyh的博客
12-12 4594
electron-vue 的项目搭建、运行到打包
Vue项目中直接引入图片报错（404 Not Found）
weixin_71962268的博客
10-22 2907
在view项目中引入图片，无法在网页上显示控制台报告404 not found的错误时的三种解决方法。 方法一：在src的static文件夹中，把需要用到的音频或图片放里面 更改路径 刷新 视频和图片正常显示和播放。 方法二：在src的assets文件夹中，把需要用到的音频或图片放里面 更改路径 突然报错了 这里报错的原因是使用了相对路径 修改路径就可以了 方法三：图片在/public目录下，把图片或音频放到与index.ht
网页项目中直接引入图片 报错（404 not found）
最新发布
Si_Zhai_Kun的博客
09-18 237
而你的图片存放在/static/images/里，那就在后面的配置加上。闹腾了一天终于解决了这个b问题，气得我马上发了一篇博客。如题，如果你的application配置是这样的。
vue项目图片加载404（not found）问题，如何解决
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 3531
vue路径报404，解决方式
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 5203
<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路由管理器Vue-router的使用方法详解
10-15
在这个配置中，`/home`路径会渲染`Home`组件，而通配符`*`路径会渲染`NotFound`组件，用于处理未定义的路由。 Vue-router还提供了导航守卫功能，可以在路由发生改变时执行特定逻辑，如全局前置守卫、组件内守卫和...
Vue3 + Ts + Pinia + uni-app 学习笔记
qq_33365152的博客
09-13 675
Vue3 +Ts + Pinia + uni-app 学习笔记
npm install -g @vue/cli报错
Ai_Zbh的博客
09-28 1万+
npm安装@vue/cli报错 npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN depre
vue-cli3进行路径自定义 (vue-cli3配置踩雷：These dependencies were not found:)
一只蒻蒻的博客
01-17 790
vue-cli3进行路径自定义总结(vue-cli3配置踩雷：These dependencies were not found:) 今天弄这个弄了好久，于是想记录下来，方便自己也方便他人。 vue-cli2 首先vue-cli2要是想要修改自定义路径，需要到build文件夹下面的、base.conf.js文件里面 修改如下部分代码，在alias中加入新的自定义键值对即可。 vue-cli3 在vuecli3中，推崇零配置，故不再存在build文件夹，所有的配置都需要在一个自己增加的文件vue.conf
解决vue v-for src 图片路径问题 404
10-16
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目静态资源404报错(vue3)
beiTiao_lys的博客
03-22 1858
vue中静态图片404
Vue 图片加载404处理方法及全局注册函数
开发猫
07-20 1284
Vue 图片加载异常处理 <img :src="imgUrl" @error="errorImg" /> errorImg(event) { let img = event.srcElement img.src = require('@/assets/img/noImg.png') img.onerror = null //防止一直跳动 } 全局注册函数 暂时排除使用Vue.use注册函数的方式（多写一些繁琐的代码） 公共函数js funct..
vue中img标签404错误处理事件onerror
m0_62823653的博客
05-29 8391
第一部分：vue中img标签onerror事件 第一种方法：使用@error方法能处理onerror事件（据说会导致回闪，目前没遇到） <img :src="xxx图片资源" @error="fn"> //当图片资源加载报错404时会被调用 fn(e) { //substitute为导入进来的图片 e.target.src = this.substitute }, //若是真的遇到了回闪 @error=>:onerror <img :src="xxx图片资源" :o
img vue动态绑定图片报404解决办法
hzh2310841288的博客
06-05 523
解决img 拿去本地文件报404
vue中data中引用本地图片报错404
weixin_30613343的博客
04-19 600
首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖，如果执行npm run dev或npm run build命令行，assets会被编译，导致路径发生变化，所以如果写成绝对路径，会存在问题 2.static在项目编译的过程中webpack不会被解析，他相当于是存放第三方文件的地方，路径可写成绝对路径 总结...
vue 从数组中引入本地图片报404错误
weixin_42065274的博客
04-09 1065
vue 从数组引入本地图片报404错误 问题描述：往数组中添加本地图片，在页面中一直提示图片资源404的错误 这个是引入图片数组 解决方法：就是在路径前添加 require 就可以啦~ 这样问题就解决了~ ...
vue动态加载图片地址时报错404的解决方案
weixin_57209852的博客
08-26 4658
vue中动态绑定图片报错404问题
Vue项目404页面定制与路由失效重定向
name: 'notFound', hidden: true, // 隐藏这个路由不显示在菜单中 } ]; ``` 这样配置后，如果用户试图访问的路由未在配置中列出，浏览器将自动跳转到`/404`页面。这里提到的一个小问题是关于token失效的处理，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小呀小萝卜儿

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

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

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

打赏作者

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

抵扣说明：

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

余额充值