vite動態加載圖片

參考CSDN

方法一

根據官網的提示, 就是在將asset 前面加上src

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

方法二

關於第二個方法，官網說：“實際上，Vite 並不需要在開發階段處理這些代碼！在生產構建時，Vite 才會進行必要的轉換保證 URL 在打包和資源哈希后仍指向正確的地址。”

因此，以下的方法開發階段不需要了解。

首先把給src綁定一個函數，然后把需要圖片名字傳給函數。

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

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。