vue + element 如何显示本地图片

vue + element 如何显示本地图片

element 中的图片组件是 el-image
原生的 html 中的图片用的是 img 标签

不管用哪一种，这个 url 必须要用 require() 包裹，四种写法见下：

<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%" />
</template>

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