Image 图片

图片容器,在保留原生img的特性下,支持懒加载,自定义占位、加载失败等

基础用法

Image 图片 - 图1

可通过fit确定图片如何适应到容器框,同原生 object-fit

  1. <div class="demo-image">
  2. <div class="block" v-for="fit in fits" :key="fit">
  3. <span class="demonstration">{{ fit }}</span>
  4. <el-image
  5. style="width: 100px; height: 100px"
  6. :src="url"
  7. :fit="fit"></el-image>
  8. </div>
  9. </div>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
  15. url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
  16. }
  17. }
  18. }
  19. </script>

占位内容

Image 图片 - 图2

可通过slot = placeholder可自定义占位内容

  1. <div class="demo-image__placeholder">
  2. <div class="block">
  3. <span class="demonstration">默认</span>
  4. <el-image :src="src"></el-image>
  5. </div>
  6. <div class="block">
  7. <span class="demonstration">自定义</span>
  8. <el-image :src="src">
  9. <div slot="placeholder" class="image-slot">
  10. 加载中<span class="dot">...</span>
  11. </div>
  12. </el-image>
  13. </div>
  14. </div>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
  20. }
  21. }
  22. }
  23. </script>

加载失败

Image 图片 - 图3

可通过slot = error可自定义加载失败内容

  1. <div class="demo-image__error">
  2. <div class="block">
  3. <span class="demonstration">默认</span>
  4. <el-image></el-image>
  5. </div>
  6. <div class="block">
  7. <span class="demonstration">自定义</span>
  8. <el-image>
  9. <div slot="error" class="image-slot">
  10. <i class="el-icon-picture-outline"></i>
  11. </div>
  12. </el-image>
  13. </div>
  14. </div>

懒加载

Image 图片 - 图4

可通过lazy开启懒加载功能,当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器,若未定义,则为最近一个overflow值为autoscroll的父元素。

  1. <div class="demo-image__lazy">
  2. <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
  3. </div>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. urls: [
  9. 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  10. 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  11. 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  12. 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  13. 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  14. 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  15. 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
  16. ]
  17. }
  18. }
  19. }
  20. </script>

大图预览

Image 图片 - 图5

可通过 previewSrcList 开启预览大图的功能。

  1. <div class="demo-image__preview">
  2. <el-image
  3. style="width: 100px; height: 100px"
  4. :src="url"
  5. :preview-src-list="srcList">
  6. </el-image>
  7. </div>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  13. srcList: [
  14. 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  15. 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
  16. ]
  17. }
  18. }
  19. }
  20. </script>

Attributes

参数说明类型可选值默认值
src图片源,同原生string-
fit确定图片如何适应容器框,同原生 object-fitstringfill / contain / cover / none / scale-down-
alt原生 altstring--
referrer-policy原生 referrerPolicystring--
lazy是否开启懒加载booleanfalse
scroll-container开启懒加载后,监听 scroll 事件的容器string / HTMLElement最近一个 overflow 值为 auto 或 scroll 的父元素
preview-src-list开启图片预览功能Array-
z-index设置图片预览的 z-indexNumber2000

Events

事件名称说明回调参数
load图片加载成功触发(e: Event)
error图片加载失败触发(e: Error)

Slots

名称说明
placeholder图片未加载的占位内容
error加载失败的内容