Vue.js项目中,当图片无法显示时则显示默认图片
2017-08-29 14:01
337 查看
最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片
本人试了3种方法,2种方法失败了
失败方法一:见博客:http://blog.csdn.net/qq_32786873/article/details/53483951
失败方法二:直接把图片路径直接写在data里面作为变量传到模板中,但是却发现图片还是出不了,以为是图片路径的问题,查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是:../assets/img.png,但是在网页开发者工具查看时路径却是:/static/img/img.4aa0af1.png,也就是说图片路径是有变化的。
解决方法(在方法二的基础上改进的):
使用require将图片进入,写法如下:
[html] view
plain copy
data: () => ({
logo: 'this.src="' + require('../assets/img.png') + '"'
})
注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。
然后在img的onerror方法中调用:
[html] view
plain copy
<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">
在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。
本人试了3种方法,2种方法失败了
失败方法一:见博客:http://blog.csdn.net/qq_32786873/article/details/53483951
失败方法二:直接把图片路径直接写在data里面作为变量传到模板中,但是却发现图片还是出不了,以为是图片路径的问题,查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是:../assets/img.png,但是在网页开发者工具查看时路径却是:/static/img/img.4aa0af1.png,也就是说图片路径是有变化的。
解决方法(在方法二的基础上改进的):
使用require将图片进入,写法如下:
[html] view
plain copy
data: () => ({
logo: 'this.src="' + require('../assets/img.png') + '"'
})
注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。
然后在img的onerror方法中调用:
[html] view
plain copy
<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">
在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。
相关文章推荐
- Vue.js项目中,当图片无法显示时则显示默认图片
- vue项目中,图片无法显示时,显示默认图片,但默认图片路径出错
- JS使用默认图片代替页面上无法显示的图片
- vue.js图片无法显示问题总结
- 【HTML/JS】图片不存在时,显示一个默认的图片
- 网易邮箱的JS插件被AdBlock广告屏蔽插件拦截,导致无法显示邮件图片
- vue打包后图片路径错误无法显示
- Nginx反向代理导致图片、JS及CSS样式表无法显示问题解决
- Vue.js 图片不显示 | 图片资引用 | img src 路径出错
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- java项目中页面上的图片无法显示
- JS图片加载失败显示默认图片
- 在JAVA WEB项目中,JSP中的图片无法显示,绝对路径和相对路径问题的解决办法。
- 在vue中的js部分导入图片后通过webpack无法被正确打包的问题
- 解决JAVA EE项目中JSP无法显示绝对路径图片
- JS实现图片不存在时显示默认图片
- 解决Vue 项目打包后favicon无法正常显示的问题
- iOS不得姐项目--图片帖子模块,大图默认显示最顶部分的处理
- intellij IDE build出错,无法显示图片,找不到tomcat server,java编译版本过低,异常推出后无法启动项目等常见问题解决
- 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片