vue 从数组中引入本地图片报404错误

最新推荐文章于 2023-04-19 11:38:23 发布
最新推荐文章于 2023-04-19 11:38:23 发布
阅读量1k 收藏
点赞数 1
分类专栏： vue 前端随笔 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42065274/article/details/105409891
版权

vue 从数组中引入本地图片报404错误

问题描述：往数组中添加本地图片，在页面中一直提示图片资源404的错误
在这里插入图片描述
这个是引入图片数组
在这里插入图片描述
解决方法：就是在路径前添加 require 就可以啦~
在这里插入图片描述
这样问题就解决了~

欢快的小码农
关注
专栏目录
关于vue-cli脚手架打包后获取本地大图片或大文件报404的解决办法
junjie_jh的博客
04-14 583
最近帮公司同事看一个比较棘手的问题，查了好久终于找到了解决方案，记录下来方便以后碰到这个问题的小伙伴参考。 是这样的，这个项目用vue-cli脚手架构建的项目，使用了 element-ui 中的字体图标，打包之后出现element-icons.ttf报404的错误。 查看网上的解决办法都是在webpack中配置，但是该项目没有配置专门的wabpack，只有一个 vue.config.js文件，查...
vue 直接访问静态图片_在使用vue中实现本地静态图片路径（详细教程）
weixin_39977586的博客
12-20 5011
这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式，需要的朋友参考下吧这里写图片描述需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。1.在img标签里面直接写上路径：2.利用数组保存再循环输出： {{ item.title }}data: () => ({carouselData:[{url:require('...
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数组引用本地图片无效解决方法
王佩健的博客
04-09 812
vue数组引用本地图片无效解决方法 错误写法 [ { src:'../../890.jpg' } ] 正确写法 [ { src:require('../../890.jpg'） } ]
vue 中如何引入本地图片， 实现图片循环遍历 & 文字换行循环遍历
qq_41442428的博客
09-09 8552
vue 中如何引入本地图片， 实现图片循环遍历 & 文字换行循环遍历 要实现图片的循环遍历， 1.在data中把图片的路径用数组组合而成。 比如 data(){ return { content_top:[ { title:‘图片1", src:’./imges/a.png’ key:‘0’}, { title:‘图片2", src:’./imges/b.png’,key:‘1’}, {...
vue data引入本地图片的两种方式小结
10-16
在Vue.js应用中，引入本地图片资源是常见的需求，特别是在构建用户界面时。本文将详细介绍两种在`data`属性中引入本地图片的方法，以便在模板中动态显示这些图片。 **方法一：使用`require()`** 在Vue组件的`data`...
vue实现引入本地json的方法分析
10-18
本文将探讨如何在Vue项目中实现引入本地JSON文件，并解析其中的数据以供使用。 1. **组件内引入JSON** 首先，我们可以直接在Vue组件内部使用import语句来引入本地的JSON文件。例如，有一个名为`test.json`的文件，...
vue中img src 动态加载本地json的图片路径写法
10-17
本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 首先，重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或...
解决vue的 v-for 循环中图片加载路径问题
10-18
例如，如果图片存储在`src/img`目录下，但Vue CLI打包后，图片路径会改变，需要使用相对路径或者绝对路径来确保在生产环境中也能找到图片。 2. **懒加载**：在大量图片加载时，考虑使用懒加载策略，以提高页面加载...
图片路径都对的却报404，记得查看下图片扩展名大小写是否一致
马小帅的博客
07-23 1326
如题，图片路径都对的却报404，记得查看下图片扩展名大小写是否一致 （一般为小写例如 .jpg，偶尔为大写.JPG导致不一致产生404）
前端上传图片，在本地加载时，有时显示正常，有时显示 404，以及在 Vue 中的解决办法
shiyutim
07-12 3588
文章目录出现问题的过程解决办法 出现问题的过程 前端在上传图片的时候，需要在项目里面显示出用户上传过后的图片，但是实际中显示的时候，有时正常，有时加载失败同时控制台报 404 错误。在报 404 错误后，复制路径直接访问，却发现能够访问到这个图片，所以这就很奇怪了。 秉着专研主义精神的我，必须要找到原因。于是我在控制台编辑这个图片的路径，先是改为错的路径，html 里会看到图片重新载入，然后加载失败，继续把路径改为正常的，html 重新加载后，显示正常。 我突然想到，既然能够访问到这个图片，说明上传到服务器
vue项目图片加载404（not found）问题，如何解决
最新发布
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 3531
vue路径报404，解决方式
vue项目 图片403 和404问题
weixin_59519449的博客
04-15 615
问题：图片403 和404 问题 问题分析 和解决：
Vue图片放数组获取或者后台获取，功能列表
Ypromise-的博客
12-03 4059
（给以后的自己留方便） 最近做个小功能，要求写个功能列表，图片从数组获取，用循环来写。（也可用于图片轮播） 一开始也是遇到数组里的图片出不来，后来这样就出来了： 功能列表的布局，主要用的是element-ui的popover组件。 图片数组： 用require请求图片（我这是本地） 在循环里绑上 :src 图片就出来啦 效果图： 最后贴上css： 如果只有两排功能，是不出现滚动的！ ...
2022-12-07 工作记录--Vue-图片404（Not Found）
weixin_48850734的博客
12-07 1416
-Vue-图片404（Not Found）
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的三种图片引入方式
嘿嘿
05-19 856
vue的三种图片引入方式 首先给图片地址绑定变量： <template> <img :src="imgUrl"> </template> 在script中设置变量： //方法1：直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2：把imgUrl放在数据中 data() { return { imgUrl:require("../assets/test.png")
vue 如何通过数组内指定的字段名称去对应填充相对的图片
DadiaoMan的博客
07-12 573
vue 如果通过数组内指定的字段名称去对应填充相对的图片
Vue实现批量文件/图片转ZIP下载教程
本教程主要介绍如何在Vue项目中实现文件和图片的批量打包下载功能，采用zip格式。通过文件的URL，利用JavaScript的XMLHttpRequest获取Blob对象，然后使用JSZip库将Blob对象压缩成zip文件，最后借助FileSaver库实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值