vue里img图片路径加载失败原因

最新推荐文章于 2024-06-01 15:00:21 发布
最新推荐文章于 2024-06-01 15:00:21 发布
阅读量1.7k 收藏 2
点赞数
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52315656/article/details/129925168
版权

失败代码：

 原因是直接放入的路径img:'../../assets/img/img.jpg'无法直接解析；

一般解决方法有两种：

一种是静态放入路径：

 还有就是动态放入：

就是直接将img设计为：img:require('../../assets/img/img.jpg')

如果是数据库里获取的路径，则应该这样写：

需要注意的，此时的../../assets/img/是路径名的前缀，而此时的img路径应该只是图片名字，

也就是将img:require('../../assets/img/img.jpg')改为img：img.jpg就可以了

 

 

小白^:-)
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 动态加载本地图片路径 报错Cannot find module ‘./undefined‘
huxvhai123的博客
11-15 5279
<!-- 代码01 --> <li v-for="(item,index) in data"> <img :src="require('@/'+ item.imgpath)" /> </li> data为获取的json数据，是数据的集合(数组)，即类似这样[{...},{...},...,{...}]，imgpath是json里面本地图片的路径数据，像代码01这样写，img标签是写在一个v-for里面的，控制台是不会报任何错误的； <!-.
【Vue】关于开发中本地图片加载失败的经验总结
NineWaited的博客
06-07 8618
关于vue网页的开发过程遇到本地图片加载失败的解决方法
图片加载出错的处理方式
最新发布
fehub
06-01 474
通常情况下，HTML 中的 img 标签加载出错后会默认显示一张裂开的图片，如果设置了 alt 属性，还会在默认图片后面显示 alt 属性的内容。
解决Vue中动态渲染图片路径报错问题
weixin_75115821的博客
10-26 622
今天在做项目的时候在本地assets中后动态渲染加载图片，死活加载不出来，F12控制台提示图片存在路径错误，但是不使用动态渲染，一模一样的路径，就可以渲染出来，就很神奇。其中说到了直接路径会编译为 require('./image.png')这类资源将会直接被拷贝，而不会经过 webpack 的处理。代码如下，可以看见动态渲染的地址直接写的地址一模一样，但就是渲染不出来。这样图片就能成功渲染了，不在出现路径错误。
css处理图片失效显示错误兜底图代码
qq_2511276124的博客
04-04 736
图片加载失败，添加错误css类,添加伪类填充错误图片和alt提示信息
vue循环绑定img图片路径加载不出来？使用这两种方法绝对好使
一家外包公司的码农，专职前端开发
01-20 8574
相信来到这里，应该是图片路径的难题困扰了你。我的图片路径明明是正确的呀！为什么图片出不来呢？其实是引入方式的问题，还是老样子，我们直接上方法。 第一种：使用require引入本地图片路径。 第二种：使用远程服务器图片路径。 第三种：（大聪明——自研失败品：可忽略不看）修改本地路径与vue项目路径保持一致。 第一种：使用require引入本地图片路径。 <template> <div> <!-- 循环遍历data中的img数据 绑定index --&
vue中img标签图片加载失败加载另一张图片
m0_73162280的博客
06-26 726
当图片不存在时，将触发 onerror事件，而 onerror 中又为 img 指定一个图片。也就是说图片存在则显示logo.png，图片不存在将显示 error.png。
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. **懒加载**：在大量图片加载时，考虑使用懒加载策略，以提高页面加载...
基于vue 动态加载图片src的解决方法
08-28
基于vue 动态加载图片src的解决方法 一、 Vue 中的动态加载图片src问题 在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...
解决Vue动态加载本地图片问题
10-16
原因是浏览器没有正确解析图片路径，而是将其作为字符串显示。这是因为Vue编译时没有处理相对路径，导致图片资源未能被正确引用。 **解决方案一：全局import图片** 一种解决方法是在组件内部或者在Vue实例的入口...
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
08-29
- `error`：图片加载失败时替换的图片路径。 - `loading`：图片加载过程中显示的加载指示符图片路径。 - `attempt`：加载失败后重试的次数。 在Vue组件中，你只需将`img`标签的`:src`属性替换为`v-lazy`指令，像...
bug解决-Vue中img图片加载失败解决方案
hangao233的博客
05-08 1492
Vue 中img图片加载失败解决方案 bug：assets文件下的图片动态取得话，显示不出来。 解决方法：把图片放到public文件夹下 public是直接原封不动打包到dist里面
vue项目中 img标签加载失败(404)方法，@error事件
sunshineTing2的博客
02-20 3571
@error="defImg" <img src="123" @error="defImg" alt="" width="150" > export default { data() { return { defaultImg: require("@/assets/img/img_fail.png"), } }, methods: { defImg(){ let img = event.srcEl
vue.js图片无法显示问题总结
热门推荐
milli236的博客
09-24 1万+
1。data数据里的写法： js里的应该是要写成 url: require('../../assets/workbench/1.png') 如： export default { name: 'hello', data () { return { msg: 'Welcome to Yrrrrrrrf对p', visible:false,
vue项目中，图片无法显示时，显示默认图片，但默认图片路径出错
baifu2766的博客
08-25 736
问题描述 在vue项目中，同样的图片，设置在img的src中能正常显示 设置在img的onerror中不能正常显示 原因 项目启动后， 图片的路径并不是我们写的路径了。 示例： 源代码： // 直接加载 <img src="../../assets/img/timg.jpg"> // 设置为logo.png加载失败后显示的默认图...
vue图片加载失败image load failed的解决办法
xiewu1015的博客
01-04 9006
在index.html里面标头默认不使用外部资源，所以在复制cordova中的index.html到vue项目的index.html中，要注意以下代码： &lt;meta http-equiv="Content-Security-Policy" content="* gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self...
vue加载图片失败解决方法
qq_41395120的博客
05-13 2666
在vue项目中，我们引用图片组件 el-image 绑定路径会提示加载失败，如下图所示 <el-image class="zuipinImg" src="@/assets/photo.png" :preview-src-list="zuopinsrcList"> </el-image> 解决方案 1、使用绝对路径 <el-image :src="'https://fuss10.elemecdn.com/e/5d/4a73
vue img 加载本地图片
06-13
在 Vue.js 中，你可以使用 `require` 函数来加载本地图片。例如： ```html <img :src="imageUrl" alt="本地图片"> export default { data() { return { imageName: 'my-image.png' }; }, computed: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值