img相关

img 相关

<img v-lazy="item.image" title="图片" alt="用户头像"/>

• title 通常当鼠标滑动到元素上的时候显示；大多数选择器都可以加title属性
• alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

v-lazy 是当页面需要加载大量图片时（需要向下滚动页面获取图片），使用懒加载可以实现只优先加载页面可视区域的图片，从而使得页面加载更为流畅。

使用步骤

1. 安装

cnpm i vue-lazyload -S

2. main.js

//添加以下两行代码
//-------------------------------
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
	error: require("assets/img/loading/error.png"), // 图片加载失败显示
    loading: require("assets/img/loading/loading.png") // 图片加载中显示
})   
//-------------------------------

3. 页面使用

//直接将 ':src' 替换为 'v-lazy' 即可
<img v-lazy="img.src" >
<img :src="img.src" >

⚠️

此时要注意，如果你引入的图片在static目录下，直接输入相对路径即可，如果你的图片在src下的某一个目录则使用require(’’)，此处的icon就是通过require引入的图片资源。 <img class="icon" :src="require('assets/img/logo/logo.png')" alt />改为<img class="icon" v-lazy="require('assets/img/logo/logo.png')" alt />，这是一个简单的示例。