Vue.js项目中,当图片无法显示时则显示默认图片

Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法

最近在学习Vue时，遇到了一个问题，就是从后台传过来的图片路径无效时，需要在页面显示默认图片

本人试了3种方法，2种方法失败了（失败原因：图片定位失败）

失败方法一：

　　见http://blog.csdn.net/qq_32786873/article/details/53483951

失败方法二：

　　直接把图片路径直接写在data里面作为变量传到模板中，但是却发现图片还是出不了，以为是图片路径的问题，

　　查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是：../assets/img.png，

　　但是在网页开发者工具查看时路径却是：/static/img/img.4aa0af1.png，也就是说图片路径是有变化的。

解决方法（在方法二的基础上改进的）：

　　使用require将图片进入，写法如下：

　　data: () => ({
　　　　logo: 'this.src="' + require('../assets/img.png') + '"'
　　})

注：我是在data里就将字符串拼接好了，当然也可以在onerror方法里拼接，这里就不赘述了。

然后在img的onerror方法中调用：

在v-bind标签中，单引号' '引用的内容作为字符串存在；双引号" "引用的内容作为变量/表达式存在，可以进行运算。

转载于:https://www.cnblogs.com/zhusf/p/10870422.html

Vue.js项目中,当图片无法显示时则显示默认图片相关推荐

Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...
在 Nuxt.js 和 Vue.js 项目中引入第三方字体或艺术字
一.需求分析在我们写前端页面的时候,大部分时候是不需要用到第三方字体的,但如果是面向C端的页面,比如宣传页,就有可能会引入第三方字体,主要还是看UI设计师咋想了,此时我们可以通过让UI将特殊字体切成 ...
vue.js项目中配置mapbox可视化地图api
1. 本地创建vue.js项目 cmd或者terminal中运行下面的命令开出vue project manager,之后按照所需要配置创建vue.js项目 vue ui 2. 在mapbox官网上申 ...
VUE.js项目中控制台报错： Uncaught (in promise) NavigationDuplicated解决方法
问题愿意:依赖包中vue-router出现问题(猜测为版本问题): 解决方法:在项目目录下运行 npm i vue-router@3.0 -S 这条指令就可以解决了.(更换版本) 或者在main.js ...
vue图片不存在时加载默认图片
在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/image ...
Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
老文章了,目前用el-input v-model.number就能解决很简单的操作,不知道当初在做什么,下文请直接忽略- Vue.JS项目中v-model导致输入框中number类型值自动转换成st ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...

Vue.js项目中,当图片无法显示时则显示默认图片

Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法

Vue.js项目中,当图片无法显示时则显示默认图片相关推荐

最新文章

热门文章