vue中动态修改img标签中src的方法

首先看vue中img标签的常规写法

<img src="@/assets/images/xxx.png" alt="">

当src需要动态修改时，有点麻烦，经常忘记，记录一下

vue2解决方案

<template><div><img :src="imgsrc" alt=""></div>
</template>
export default {data(){return {imgsrc: require('../../assets/images/user.png')}}
}

可以通过相关的方法改变this.imgsrc的值，实现动态修改src的值

vue3解决方案

发现vue3+vite不能使用require，一使用就报错，找了半天，找了个解决方案

实际情况：通过心知天气返回的天气code获取对应的天气图标

获取相关的接口就不写了，直接写相关的代码

需要先写一个转换URL的方法

const getImgUrl = code => {return new URL(`../../../assets/weather/${code}.png`, import.meta.url).href
}

code就是从心知天气返回的天气代码，对应的图片我放在src/assets/weather/文件夹下，code值+.png对应相关的天气图片

完整使用

<script setup>
import { ref, onMounted } from 'vue'
// 获取天气相关
import axios from 'axios'
const imgsrc = ref('')
// vue3+vite不能直接使用require动态修改img的src，试试下面这种方式
const getImgUrl = code => {return new URL(`../../../assets/weather/${code}.png`, import.meta.url).href
}
const getWeather = async () => {const url = 'https://api.seniverse.com/v3/weather/now.json?key=yourkey&location=wuxi&language=zh-Hans&unit=c'const {data, error} = await axios.get(url)// console.log(data)const result = data.results[0].now// console.log(result)imgsrc.value = getImgUrl(result.code)}
onMounted(() => {getWeather()
})</script><template><nav class="app-topnav"><div class="weather"><img :src="imgsrc" alt=""></div></nav>
</template><style scoped lang="scss">
</style>