img标签中可以使用 @error 事件去处理图片地址，显示一些默认图片或者做一些其他的事情
<img src="https://p./t0199397a4f9c5e1b3b3.jpg" @error="(e)=>{ e.srcElement.src='https://p./t0199397a4f9c5e1b3b.jpg'}">
vue 使用 v-html 来解析 img标签 @error 失效不起作用 ╮(╯﹏╰）╭
v-html 底层是 innerHTML 而 innerHTML 以文本形式插入,不识别事件的
<template><div class="demo"><div v-html="html"></div></div></template>export default {data() {return {html: '<img src=\"https://p./t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src=\'https://p./t0199397a4f9c5e1b3b.jpg\'}\">',}}}
难道就要止步于此？？ 额付考死闹特。我不使用 v-html 不是就不会出现这个问题了嘛.
Vue.directive('test', {bind: function (el, binding) {var MyComponent = Vue.extend({template: '<div>' + binding.value + '</div>',});el.appendChild(new MyComponent().$mount().$el)},update: function (el, binding) {var MyComponent = Vue.extend({template: '<div>' + binding.value + '</div>',});el.innerHTML = "";el.appendChild(new MyComponent().$mount().$el)}})
<template><div class="demo"><div v-html="html"></div>***************************************<div v-test="html"></div></div></template>export default {data() {return {html: '<img src=\"https://p./t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src=\'https://p./t0199397a4f9c5e1b3b.jpg\'}\">',}}}
其余的都可以这样搞 比如@click 这种乱七八糟的事件，下面是完整代码
<template><div class="demo"><div v-html="html"></div>***************************************<div v-test="html"></div></div></template><script>import Vue from 'vue';// const htp = "<p><img src=\"https://p./t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src='https://p./t0199397a4f9c5e1b3b.jpg'}\"><br/></p>";Vue.directive('test', {bind: function (el, binding) {var MyComponent = Vue.extend({template: '<div>' + binding.value + '</div>',});el.appendChild(new MyComponent().$mount().$el)},update: function (el, binding) {var MyComponent = Vue.extend({template: '<div>' + binding.value + '</div>',});el.innerHTML = "";el.appendChild(new MyComponent().$mount().$el)}})export default {name: "HelloWorld",data() {return {html: "<img src=\"https://p./t0199397a4f9c5e1b3b3.jpg\" @error=\"(e)=>{ e.srcElement.src='https://p./t0199397a4f9c5e1b3b.jpg'}\">",}},}</script>
