Vue3中引用本地图片路径的方法详解

<template>
    <img style="width: 100px; height: 100px" src="@/assets/01.png" />
</template>

<el-image :src="require('@/assets/2.png')" />  //X
<el-image :src="require('../assets/2.png')" />  //X

<el-image src="@/assets/2.png" /> //X  
<el-image src="../assets/2.png" />  //X

<el-image :src="require('@/assets/2.png')" />  //√
<el-image :src="require('../assets/2.png')" />  //√

<el-image src="@/assets/2.png" />  //X
<el-image src="../assets/2.png" />  //X

<template>
    <el-image style="width: 100px; height: 100px" :src="accIcon" />
</template>

<script setup>
import accIcon from "@/assets/01.png"
</script>

<template>
  <img src="./image/1.jpg"/>
</tempalte>

<template>
  <img :src="imgUrl">
</template>
<script>
export default {
  data() {
    return {
      imgUrl:require('./image/1.jpg')
    }
  }
}  
</script>

<template>
  <img :src="imgUrl">
</template>
<script>
import img from './image/1.jpg'
export default {
  data() {
    return {
      imgUrl:img
    }
  }
}  
</script>

<template>
  <img :src="imgUrl">
</template>
<script>
export default {
  data() {
    return {
      imgUrl:''
    }
  },
 created() {
    let urlImg = "pages/MSite/image/1.jpg"
    this.imgUrl = require("@/"+urlImg)
  }
}  
</script>