Vue 3+vite 动态引入本地图片img

描述：通过某个状态属性显示不同的图片。【通过点击事件，模拟修改状态，通过状态显示不同的图片】

方法一

Vue3的已经不能使用require，只能通过import导入

试试效果

方法二

通过：new URL(url, import.meta.url)。
import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

通过这种方法，我们可以动态设置URL

实现效果

对比上面import，这种是通过状态的值直接改吧，如果有很多很多判断的时候，效率高。而import需要switch…case等判断优化，比较繁琐。

废话拓展

既然项目的图片都可以动态改变，那么是不是把项目的图片全部变成动态，统一放在一个文件夹维护，瞬间项目可以变成为秒换项目，老板看见能换壳，商机来了，夸你顶呱呱。