2024-10-24 vue匯入圖片路徑

叶乘风發表於2024-10-24
Vue

你是不是經常這麼寫：

let arr = [
    {
      src: "../../assets/good/1.png",
      }
    ]

然後你發現無法顯示圖片路徑，那是因為你引入的圖片路徑方式不正確，

如果你的專案是由webpack或者vite構建，那麼在匯入圖片路徑的時候會有些許區別。

webpack：

let arr = [
    {
      src: require("../../assets/good/1.png"),
      }
  ]

vite：

let arr = [
    {
      src: new URL("../../assets/good/1.png", import.meta.url).href,
    }
  ];

如果圖片路徑固定，那麼可以直接透過import來匯入

import img1 from "../../assets/good/1.png"

相關文章