vite动态加载图片

叫我少年2023-07-22 18:08

方法一

根据官网的提示, 就是在将asset 前面加上src

html 复制代码

<img v-if="post.welcomeScreen" :src="`/src/assets/blogPhotos/${name}.jpg`" alt="" />

方法二

关于第二个方法，官网说："实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。"

因此，以下的方法开发阶段不需要了解。

首先把给src绑定一个函数，然后把需要图片名字传给函数。

js 复制代码

<img :src="" alt="getImageUrl(name)" />
//or
<img v-lazy="getImageUrl(res.img)" />

js 复制代码

function getImageUrl(name) {
    return new URL(`../assets/blogPhotos/${name}.jpg`, import.meta.url).href;
//or
function getImageUrl(name) {
    return new URL(`/src/assets/img/${name}`, import.meta.url).href
  }

import.meta

import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中，它包含当前脚本的 URL，或者如果它是在 HTML 中的话，则包含当前页面的 URL。