关于vite用alias引入图片的探究

4,176 阅读1分钟

最近一直在用vite,发现图片引用这块有几个小问题,请指教一下。

我采取了8种方法引用图片:
已经配置好了别名了assets和images

image.png

image.png

发现在子目录下,和用变量名引用图片,image preview这个插件不能正常识别出来。
并且页面中,用别名的方式无法正常显示。大概是因为没有打包的缘故把。

image.png

打包后的文件:

打包后的别名反而可以了,字符串的形式反而识别不出来。那就意味着——我在开发的时候想用alias别名的方式引入图片是不行的。并且我如果将图片的path存放到一个变量中,比如:goods:{name:'',path:'images/1.jpg'},这也是经常用到的,但是却会导致无法正常加载图片。

image.png

不知是否有其他的办法解决在开发环境下,无法用alias引入静态资源的问题。

以及将图片路径存放到字符串中,打包后无法正常加载的问题。