###
Vue Element Plus `
el-image` 使用
方法及功能介绍
#### 功能概述
Element Plus 的 `
el-image` 是一个用于展示图像的组件，支持多种高级特性，例如懒加载、缩放预览以及错误处理等功能。通过简单的配置即可实现复杂的
图片交互效果。
---
#### 基本用法
以下是 `
el-image` 的基本结构及其核心属性说明：
```html
<
el-image
style="width: 100px; height: 100px"
:src="
imageUrl"
:fit="'cover'"
lazy>
</
el-image>
```
- **`:src`**:
图片资源路径[^1]。
- **`:fit`**: 定义当容器尺寸与
图片不一致时如何调整
图片大小，可选值有 `'fill'`, `'contain'`, `'cover'`, `'none'`, 和 `'scale
-down'`。
- **`lazy`**: 启用懒加载模式，仅在
图片进入视口区域时才加载。
---
#### 预览大图功能
为了实现点击按钮后弹出大图预览的效果，可以利用 `
el-image` 提供的 `preview
-src
-list` 属性来指定一组
图片列表，并调用其内部的
方法触发事件。
##### 实现代码示例
```html
<div class="demo
-image__preview">
<
el-image
style="width: 100px; height: 100px;"
ref="previewImg"
:src="url"
:preview
-src
-list="srcList">
</
el-image>
</div>
<
el-button type="primary" @click="viewBigPicture">点击查看大图</
el-button>
<script lang="
ts" setup>
import { ref } from '
vue';
const url = ref('https://example
.com/small
.jpg'); // 小图地址
const srcList = ref(['https://example
.com/large
.jpg']); // 大图地址集合
// 获取
el-image 组件实例并调用内置
方法
const previewImg = ref(null);
const viewBigPicture = () => {
if (previewImg
.value) {
previewImg
.value
.clickHandler(); // 调用 clickHandler
方法打开预览
}
};
</script>
```
上述代码展示了如何绑定 `@click` 事件到按钮上，从而触发展示大图的功能。
---
####
显示本地
图片
如果需要在项目中引入本地静态文件作为
图片源，则可以通过相对路径或者模块导入的方式完成。
##### 示例代码
```html
<!
-- 正常
显示 -->
<img src="
../asse
ts/
images/local
Image.png" alt="Local
Image">
<!
-- 结合
el-image -->
<
el-image
style="width: 200px; height: 200px;"
:src="require('@/asse
ts/
images/local
Image.png')">
</
el-image>
```
需要注意的是，某些情况下可能需要额外配置 Webpack 或 Vite 来正确解析本地资源路径[^2]。
---
#### 解决层级错乱问题
在复杂场景下（如表格中的插槽），可能会遇到
图片预览浮层被其他 DOM 元素遮挡的情况。此时可通过自定义样式修复该问题。
##### CSS 样式解决方案
```css
/* 添加全局样式 */
:deep(
.el-table) {
th
.el-table__c
ell,
td
.el-table__c
ell {
position: static !important;
}
}
```
此方案通过对 `
.el-table` 下的单元格重新设置定位方式，解决了因默认布局导致的层级冲突问题[^3]。
---
#### 总结
`
el-image` 不仅为开发者提供了便捷的方式来管理网页上的
图片展示需求，还集成了诸如懒加载、失败重试等实用功能。结合实际业务逻辑灵活运用这些特性能够显著提升用户体验。
---
文章描述了一个使用JavaScript在前端根据特定条件动态加载不同图片的实例，通过`equ`对象的`carNumber`和`EquState`属性来决定加载`xqc2.png`、`xqc3.png`中的哪一个。
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
