el-image显示网络图片

el-image 是 ElementUI 组件库中的一个组件，可以用来显示网络图片。

使用 el-image，需要设置 src 属性，该属性为图片的 URL 地址。例如：

<el-image src="https://example.com/images/example.jpg"></el-image>

可以通过设置 fit 属性来控制图片的显示方式，可选值包括 contain、cover、fill、none、scale-down。例如：

<el-image src="https://example.com/images/example.jpg" fit="cover"></el-image>

还可以设置 placeholder 属性，当图片加载时显示占位图。例如：

<el-image src="https://example.com/images/example.jpg" placeholder="https://example.com/images/placeholder.jpg"></el-image>

需要注意的是，el-image 组件默认会将图片缓存到本地，以提高加载速度。如果需要禁用缓存，可以设置 no-cache 属性为 true。例如：

<el-image src="https://example.com/images/example.jpg" no-cache></el-image>

相关问题

el-image显示图片却只有el-image__placeholder

el-image是Element UI中的一个组件，用于显示图片。当图片加载过程中，el-image会显示一个占位符（el-image__placeholder），直到图片加载完成后才会显示真实的图片。

相关问题:
1. Element UI是什么？
2. el-image组件有哪些属性可以配置？
3. 如何使用el-image组件加载网络图片？
4. 如何使用el-image组件加载本地图片？

el-image来显示一张图片

el-image是Element UI中的一个组件，可以用来显示一张图片。它的用法如下：

<el-image
  src="图片链接"
  :fit="缩放方式"
  :preview-src-list="预览图片列表"
  :lazy="是否懒加载"
  :lazy-load="懒加载配置"
  :error="加载失败的提示文字"
  :loading="加载中的提示文字"
  :z-index="设置图片层级"
  alt="图片描述"
/>

其中，各个属性的含义如下：

- `src`：要显示的图片链接。
- `fit`：缩放方式，可选值为`fill`、`contain`、`cover`、`none`、`scale-down`，默认值为`cover`。
- `preview-src-list`：预览图片列表，用于实现图片放大预览功能。
- `lazy`：是否懒加载，可以提升页面加载速度。默认值为`false`。
- `lazy-load`：懒加载的配置，可以设置图片加载时的占位符和加载失败时的占位符。
- `error`：加载失败时显示的提示文字。
- `loading`：加载中时显示的提示文字。
- `z-index`：设置图片的层级，用于解决图片遮挡问题。
- `alt`：图片的描述，可以提升SEO。

例如，要显示一张名为`example.jpg`的图片，代码如下：

<el-image
  src="./example.jpg"
  alt="示例图片"
/>

这样就可以在页面中显示这张图片了。