vue-element-admin 图片显示

在vue-element-admin中显示图片有多种方式。其中一种方式是使用require()来包裹图片的url。以下是几种写法的示例代码：

<template>
  <div>
    <el-image :src="imageUrl" style="height: 100%" />
    <el-image :src="require('@/assets/img.png')" style="height: 100%" />
    <img :src="imageUrl" style="height: 100%" />
    <img :src="require('@/assets/img.png')" style="height: 100%" />
  </div>
</template>

<script>
export default {
  name: 'TestImage',
  data() {
    return {
      imageUrl: require('@/assets/img.png')
    }
  }
}
</script>

以上代码展示了如何在vue-element-admin中使用require()来显示图片。您可以通过在el-image或img标签的src属性中使用require()来引用图片的url。这样做可以确保图片能够正确加载并显示在页面上。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue + element 如何显示本地图片](https://blog.csdn.net/weixin_43851264/article/details/123202455)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue-element-admin:vue-element-admin](https://download.csdn.net/download/weixin_42120275/18219106)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue3-element-admin:vue-element-admin的vue3版本](https://download.csdn.net/download/weixin_42110533/15640212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]