下图是我的文件路径

image.png

我想在vue component中访问static下的images中的图片，

1.在组件中，可以这样引用

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

2.但是发现文件不能动态更新，但是这个img就只能用这个地址的图片，无法实现动态的切换。

可以这样

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

xxx代表图片的索引，就可以动态更新了

但是如果图片较多，这种方法操作还是有点复杂

可以采用统一加载的方法

在static文件下加一个img.json文件
内容如下

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

然后在component中引入，并在data中注册，就可以直接用了。并且上传到github也能直接预览到图片

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