vue中动态修改img标签中src的方法
首先看vue中img标签的常规写法当src需要动态修改时,有点麻烦,经常忘记,记录一下。
文章共1,177字 · 阅读需要大约4分钟
一键AI生成摘要,助你高效阅读
问答
·
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>
仅保留相关的代码,经测,可用
更多推荐
已为社区贡献5条内容
所有评论(0)