vue中動態(tài)修改img標簽中src的方法實踐
更新時間：2023年07月31日 10:18:37 作者：梔椩
本文主要介紹了vue中動態(tài)修改img標簽中src的方法實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
首先看vue中img標簽的常規(guī)寫法
<img src="@/assets/images/xxx.png" alt="">
當src需要動態(tài)修改時，有點麻煩，經常忘記，記錄一下
vue2解決方案
<template>
<div>
<img :src="imgsrc" alt="">
</div>
</template>
export default {
data(){
return {
imgsrc: require('../../assets/images/user.png')
}
}
}可以通過相關的方法改變this.imgsrc的值，實現動態(tài)修改src的值
vue3解決方案
發(fā)現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動態(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>僅保留相關的代碼，經測，可用
到此這篇關于vue中動態(tài)修改img標簽中src的方法實踐的文章就介紹到這了,更多相關vue 動態(tài)修改img src內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)
這篇文章主要介紹了vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue ​v-model相關知識總結，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-01-01
在項目中經常會復用一些變量和函數,比如用戶的登錄token,用戶信息等,這時將它們設為全局的就顯得很重要了,下面這篇文章主要給大家介紹了關于vue如何定義全局變量和全局方法的相關資料,需要的朋友可以參考下2023-04-04
本文主要介紹了Vue項目部署到jenkins的實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了vue-cli 為項目設置別名的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用，這篇文章主要介紹了vue?route介紹、基本使用、嵌套路由,需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關于VUE實現自動滾動的相關資料,現在很多數據展示大屏都會有很多的自動滾動的列表,文中通過代碼實例介紹的非常詳細,需要的朋友可以參考下2023-08-08
以簡單的樹形組件為案例,實現在組件中遞歸組件,下面這篇文章主要給大家介紹了關于Vue實現遞歸組件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了如何在 ant 的table中實現圖片的渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03