<div v-for="item in imgList" :key="item.id">
  <q-img :src="item.src"/>
</div>

export default {
  data () {
    return {
      imgList: [
        {
          id: 0,
          src: '~assets/home/my_jpg1.jpg'
        },
        {
          id: 1,
          src: '~assets/home/my_jpg2.jpg'
        },
        {
          id: 2,
          src: '~assets/home/my_jpg3.jpg'
        },
      ]
    }
  }
}

此时在网站上并不会看到我们想要加载的图片，控制台会提示找不到 http://localhost:8080/~assets/home/my_jpg1.jpg资源。
此时有两个解决办法，一个是利用 require，通过引入相关资源对 src 进行动态绑定。

export default {
  data () {
    return {
      imgList: [
        {
          id: 0,
          src: require('../assets/home/my_jpg1.jpg')
        },
        {
          id: 1,
          src: require('../assets/home/my_jpg2.jpg')
        },
        {
          id: 2,
          src: require('../assets/home/my_jpg3.jpg')
        },
      ]
    }
  }
}

这时可以在网站上加载出相应图片。

第二种方法就是将图片上传到网站上，获取它对应的链接。

我的问题是如何让 src 动态绑定 '~assets' 的路径来获取相关图片资源。