我现在需要动态引入图片,因此要用到模板字符串和动态绑定。第一反应,当然就是如下写法:
<img :src="`../assets/blogPhotos/${name}.jpg`" alt="" />
但此时,控制台就报了一个错,说没有找到这张图片。
但我图片明明就放在那儿,你还说没找到。
这时一顿百度,没有找到结果。只能去vite的官网,没想到竟然被我找到解决方法了。
解决方法一
根据官网的提示,我找到了最简单的方法,就是在将asset 前面加上src。
<img v-if="post.welcomeScreen" :src="`/src/assets/blogPhotos/${name}.jpg`" alt="" />
果然还是路径写错了!
解决方法二
关于第二个方法,官网说:“实际上,Vite 并不需要在开发阶段处理这些代码!在生产构建时,Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”
因此,以下的方法开发阶段不需要了解。
首先把给src绑定一个函数,然后把需要图片名字传给函数。
<img :src="" alt="getImageUrl(name)" />
接着写这个函数
function getImageUrl(name) {
return new UR