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

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>

仅保留相关的代码，经测，可用