如何在Vite+Vue2项目中动态设置img的src？

起因

因为项目需求，需要在一个vite2.8.5+vue2.6.14项目上动态设置img原生组件的src并能生效，这过程中上网搜索到了一些方法，同时也碰到了一些问题；

方法及问题

1. 使用newURL(url, import.meta.url)

这是一种官方提到的方法，使用方法如下：

<img :src="getUrl" alt="img"/>

'''
computed: {
    getUrl () {
        return new URL('${你的URL地址}', import.meta.url)
    }
}
...

可以将方法写在计算属性或者方法属性里面，在写入方法属性时，不要忘记入参。

该方法碰到的问题

因为该方法是ESM原生功能，所以需要一开始就确定URL地址，也就是你图片的地址，否则在使用SSR渲染+vite下该方法不会生效，会报错：

“Failed to construct 'URL': Invalid URL” in v2.9.1

具体原因可以参考vite文档

2. 使用ref寻找元素并设置src

具体思路是：第一步，找到该img元素；第二步，设置该img中的src属性值；简单例子如下：

<img v-if="imgShow" v-for="(item, index) in imgList" :ref="'img' + index" :key="index"/>

...
    imgList: ['img1位置', 'img2位置', 'img3位置', ……]
    
    methods: {
        showImage () {
            this.imgShow = true;
            this.$nextTick(_ => {
                for (let index = 0; index < imgList.length; index++) {
                    this.$refs["img" + index].src = imgList[index];
                }
            })
        }
    }
...

该方法可以在事先未确定图片url的情况下动态显示图片，需要注意的是，需要先让img元素显示出来并在DOM刷新完毕之后再进行设置src，否则可能导致找不到该img元素。