vue3动态引入本地图片

一、代码

1、template

<div class="icons">
        <div v-for="(item) in iconsList" :key="item.desc" class="icons__item">
          <!-- <img class="icons__item__img" src="/src/assets/{{item.name}}.png"> -->
          <!-- <img class="icons__item__img" :src="`/src/assets/${item.name}.png`" alt="" /> -->
          <!-- <img class="icons__item__img" :src=" '../../assets/'+item.name+'.png' " alt="" /> -->
          <!-- <img class="icons__item__img" :src="getImageUrl(item.name)" alt=""> -->
          <p class="icons__item__desc">{{ item.desc }}</p>
        </div>
      </div>

2、JS

<script>
import { reactive } from 'vue'
export default {
  name: 'staticPart',
  setup () {
    const getImageUrl = (name) => {
      return require(`../../assets/${name}.png`)
    }

    const iconsList = reactive([
      { name: '超市', desc: '超市便利' },
      { name: '菜市场', desc: '菜市场' },
      { name: '水果店', desc: '水果店' },
      { name: '鲜花', desc: '鲜花绿植' },
      { name: '医药健康', desc: '医药健康' },
      { name: '家居', desc: '家居时尚' },
      { name: '蛋糕', desc: '烘焙蛋糕' },
      { name: '签到', desc: '签到' },
      { name: '大牌免运', desc: '大牌免运' },
      { name: '红包', desc: '红包套餐' }
    ])
    return { iconsList, getImageUrl }
  }
}
</script>

3、

require 是 Webpack 内的一个语法 new URL 是 vite 基于原生 ES 改造的一个语法