快捷導(dǎo)航

vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐

更新時(shí)間：2023年07月31日 10:18:37 作者：梔椩

本文主要介紹了vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

首先看vue中img標(biāo)簽的常規(guī)寫(xiě)法

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

當(dāng)src需要?jiǎng)討B(tài)修改時(shí)，有點(diǎn)麻煩，經(jīng)常忘記，記錄一下

vue2解決方案

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

可以通過(guò)相關(guān)的方法改變this.imgsrc的值，實(shí)現(xiàn)動(dòng)態(tài)修改src的值

vue3解決方案

發(fā)現(xiàn)vue3+vite不能使用require，一使用就報(bào)錯(cuò)，找了半天，找了個(gè)解決方案

實(shí)際情況：通過(guò)心知天氣返回的天氣code獲取對(duì)應(yīng)的天氣圖標(biāo)

獲取相關(guān)的接口就不寫(xiě)了，直接寫(xiě)相關(guān)的代碼

需要先寫(xiě)一個(gè)轉(zhuǎn)換URL的方法

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

code就是從心知天氣返回的天氣代碼，對(duì)應(yīng)的圖片我放在src/assets/weather/文件夾下，code值+.png對(duì)應(yīng)相關(guān)的天氣圖片

完整使用

<script setup>
import { ref, onMounted } from 'vue'
// 獲取天氣相關(guān)
import axios from 'axios'
const imgsrc = ref('')
// vue3+vite不能直接使用require動(dòng)態(tài)修改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>

僅保留相關(guān)的代碼，經(jīng)測(cè)，可用

到此這篇關(guān)于vue中動(dòng)態(tài)修改img標(biāo)簽中src的方法實(shí)踐的文章就介紹到這了,更多相關(guān)vue 動(dòng)態(tài)修改img src內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: