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

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

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

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

<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>