无脑的import导入图片？

import logo from "/src/assets/icon/logo2.png"
 <img :src="logo">

这种方式虽然能显示，但是整个页面代码太冗余了，不妨试试浏览器提供的Url

语法：new URL(url, base)

详细参见Mdn文档

const u = new URL('@/assets/icon/logo2.png', import.meta.url).href
<img :src="u">

为什么不使用动态导入？

• 显示当然没问题，但是打包的时候即使在icon文件夹中没有被引用的资源也将放入打包结果，增加打包体积

let t = 'logo2'
import(`/src/assets/icon/${t}.png`).then(res => {
  r.value = res.default
})

  <img :src="r">

显示一个图片要这么麻烦吗？为什么？

下面这样写为什么不行？

• 开发环境这样写显示是没有问题的，但是打包后会就找不到路径了
• 下图清晰的看到，第二张图片的路径还处于开发环境的状态
• 它并没有在打包的时候进行依赖构建，这样的路径在部署后是没有办法显示的

const u = new URL('@/assets/icon/logo2.png', import.meta.url).href
let t = 'logo2'


<img :src="u" alt="">
<img :src="`/src/assets/icon/${t}.png`" alt="">