vue3中动态引入本地图片的两种方法

方法一

 <img width="10" height="10":src="`/src/assets/nncs2/jiantou${index + 1}.png`" alt="" /> 

推荐 简单好用

方法二

const getImg = index => {
  const modules = import.meta.glob('@/assets/nncs2/**/*.{png,svg,jpg,jpeg}', { eager: true })
  const url = `/src/assets/nncs2/jiantou${index + 1}.png`
  // console.log(modules)
  if (modules[url]) return modules[url].default
}
  <img width="10" height="10" :src="getImg(index)" alt="" class="lableImg" />

相比第一种方法 更麻烦一点

你可能感兴趣的:(前端,javascript,vue.js)