1. Image圖片

1.1. Image圖片容器, 在保留原生img的特性下, 支持懶加載, 自定義占位、加載失敗等。

1.2. Attributes

參數	說明	類型	可選值	默認值
src	圖片源, 同原生	string	無	無
fit	確定圖片如何適應容器框, 同原生object-fit	string	fill / contain / cover / none / scale-down	無
alt	原生alt	string	無	無
referrer-policy	原生referrerPolicy	string	無	無
lazy	是否開啟懶加載	boolean	無	false
scroll-container	開啟懶加載后, 監聽scroll事件的容器	string / HTMLElement	無	最近一個 overflow值為auto或scroll的父元素
preview-src-list	開啟圖片預覽功能	Array	無	無
z-index	設置圖片預覽的z-index	Number	無	2000

1.3. Events

事件名	說明	回調參數
load	圖片加載成功觸發	(e: Event)
error	圖片加載失敗觸發	(e: Error)

1.4. Slots

名稱	說明
placeholder	圖片未加載的占位內容
error	加載失敗的內容

2. Image圖片例子

2.1. 使用腳手架新建一個名為element-ui-image折疊面板的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Image from '../components/Image.vue' import PlaceholderImage from '../components/PlaceholderImage.vue' import ErrorImage from '../components/ErrorImage.vue' import LazyImage from '../components/LazyImage.vue' import PreviewImage from '../components/PreviewImage.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Image' },{ path: '/Image', component: Image },{ path: '/PlaceholderImage', component: PlaceholderImage },{ path: '/ErrorImage', component: ErrorImage },{ path: '/LazyImage', component: LazyImage },{ path: '/PreviewImage', component: PreviewImage } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Image.vue

<template><div><h1>基礎用法</h1><h4>可通過fit確定圖片如何適應到容器框, 同原生object-fit。</h4><div class="imgContainer" v-for="fit in fits" :key="fit"><span class="title">{{ fit }}</span><el-image style="width: 100px; height: 100px;" :src="url" :fit="fit"></el-image></div></div> </template><script> export default {data () {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}} } </script><style scoped>.imgContainer {display: inline-block;width: 200px;text-align: center;}.title {display: inline-block;width: 100%;} </style>

2.4. 在components下創建PlaceholderImage.vue

<template><div><h1>占位內容</h1><h4>可通過slot = placeholder可自定義占位內容。</h4><div class="imgContainer"><span class="title">默認</span><el-image :src="src" style="width: 300px; height: 300px;"></el-image></div><div class="imgContainer"><span class="title">自定義</span><el-image :src="src" style="width: 300px; height: 300px;"><div slot="placeholder">加載中<span>...</span></div></el-image></div></div> </template><script> export default {data () {return {src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}} } </script><style scoped>.imgContainer {display: inline-block;width: 400px;text-align: center;}.title {display: inline-block;width: 100%;} </style>

2.5. 在components下創建ErrorImage.vue

<template><div><h1>加載失敗</h1><h4>可通過slot = error可自定義加載失敗內容。</h4><div class="imgContainer"><span class="title">默認</span><el-image style="width: 150px; height: 150px;"></el-image></div><div class="imgContainer"><span class="title">自定義</span><el-image style="width: 150px; height: 150px; background-color: #F5F7FA;"><div slot="error" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"><i class="el-icon-picture-outline"></i></div></el-image></div></div> </template><style scoped>.imgContainer {display: inline-block;width: 200px;text-align: center;}.title {display: inline-block;width: 100%;} </style>

2.6. 在components下創建LazyImage.vue

<template><div><h1>懶加載</h1><h4>可通過lazy開啟懶加載功能, 當圖片滾動到可視范圍內才會加載。可通過scroll-container來設置滾動容器, 若未定義, 則為最近一個overflow值為auto或scroll的父元素。</h4><div class="image-lazy"><el-image v-for="url in urls" :key="url" :src="url" lazy></el-image></div></div> </template><script> export default {data () {return {urls: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg','https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg','https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg','https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg','https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg','https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg']}} } </script><style scoped>.image-lazy {width: 400px;height: 400px;overflow-y: auto;}.image-lazy .el-image {display: block;min-height: 200px;margin-bottom: 30px;}.image-lazy .el-image:last-child {margin-bottom: 0;} </style>

2.7. 在components下創建PreviewImage.vue

<template><div><h1>大圖預覽</h1><h4>可通過previewSrcList開啟預覽大圖的功能。</h4><el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"></el-image></div> </template><script> export default {data () {return {url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']}} } </script>

2.8. 運行項目, 訪問http://localhost:8080/#/Image

2.9. 運行項目, 訪問http://localhost:8080/#/PlaceholderImage?

2.10. 運行項目, 訪問http://localhost:8080/#/ErrorImage?

2.11. 運行項目, 訪問http://localhost:8080/#/LazyImage?

2.12. 運行項目, 訪問http://localhost:8080/#/PreviewImage?

總結

以上是生活随笔為你收集整理的049_Image图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。