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>仅保留相关的代码，经测，可用
到此这篇关于vue中动态修改img标签中src的方法实践的文章就介绍到这了,更多相关vue 动态修改img src内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！