Vue组件 – img标签的封装

作者: Lynan 分类: Vue.js 发布时间: 2018-08-13 17:11

使用场景:例如我在项目中使用了这种图片,这张图片可能是很久以前上传的并且因为被删除或者其他原因导致无法获取到图片资源时,我们仍然希望在页面上能够显示一个默认的图片或者图片错误的提示,而不是导致例如元素高度崩塌等问题。

关键思路: html中的<img>标签含有一个onerror事件,当请求图片资源失败时将会触发这个事件。

处理方法: 触发事件以后,利用v-if、v-else控制默认图片的显示。

HTML:

<div class="img-component">
  <div class="has-img" :style="`backgroundImage: url(${src})`" v-if="!noImg">
    <img :src="src" @error="onImgError" alt="">
  </div>
  <div class="no-img" v-else></div>
</div>

JS:

export default{
  props:{
    src: {
      type: String,
      default: ' '
    } //为了方便使用,我采用和img标签一样的src属性
  },
  data() {
    return {
      noImg: false
    }
  },
  methods:{
    onImgError() {
      this.noImg = true
    }
  }
}

CSS:
“`.img-component{
width: 100%;
height: 100%;
.has-img{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
img{
display: none !important;
}
}
.no-img{
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-image: url(./img/default.png);
}
}

<pre><code><strong>使用:</strong>

先注册:(可以全局或者组件内引入)
</code></pre>

import Vue from 'vue'
import imgBox from '@/components/common/imgBox/main.vue'

Vue.component('img-box', imgBox)</pre>

<pre><code>组件内:
</code></pre>

<img-box :src="your_img_src"></img-box>
“`

发表评论

电子邮件地址不会被公开。 必填项已用*标注