下圖是我的文件路徑

image.png

我想在vue component中訪問static下的images中的圖片，

1.在組件中，可以這樣引用

<img src="../../static/images/card.jpg" alt>

2.但是發(fā)現(xiàn)文件不能動態(tài)更新，但是這個img就只能用這個地址的圖片，無法實現(xiàn)動態(tài)的切換。

可以這樣

<img :src="require('../../static/images/'+xxx+'.jpg')" alt>

xxx代表圖片的索引，就可以動態(tài)更新了

但是如果圖片較多，這種方法操作還是有點(diǎn)復(fù)雜

可以采用統(tǒng)一加載的方法

在static文件下加一個img.json文件
內(nèi)容如下

{
  "images": [
    {
      "src": "./../static/images/1.jpg"
    },
    {
      "src": "./../static/images/2.jpg"
    },
    {
      "src": "./../static/images/3.jpg"
    },
  ]
}

然后在component中引入，并在data中注冊，就可以直接用了。并且上傳到github也能直接預(yù)覽到圖片

import imgs from "../../../static/img.json";
export default {
  data() {
    return {
      imgs: imgs.images
  }
}