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 placeholder

el-image 是 Element UI 组件库中的一个图片组件，用于显示图片。当图片加载时，可以使用 placeholder 属性指定一个占位图，以提供更好的用户体验。

例如，你可以这样使用 el-image 组件并设置 placeholder 属性：

<template>
  <el-image
    src="your-image-url"
    :placeholder="placeholderImageUrl"
  ></el-image>
</template>

<script>
export default {
  data() {
    return {
      placeholderImageUrl: 'your-placeholder-image-url',
    };
  },
};
</script>

在上述示例中，`your-image-url` 是你要显示的图片的 URL 地址，`your-placeholder-image-url` 是你指定的占位图的 URL 地址。当图片加载时，会先显示占位图，直到实际图片加载完成后替换为真实图片。

注意，el-image 组件还有其他属性和事件可以用于控制图片的加载和显示，你可以根据具体需求进行配置和使用。

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>