原因分析
在vue项目中动态设置img的src时,图片会加载失败。我们可以先看个例子。
<template>
<div>
<h1>动态设置图片</h1>
<div>
<h5>图片一</h5>
<img
:src="
logoFlag === 'vue'
? '../assets/vue-logo.png'
: '../assets/react-logo.png'
"
/>
<div>
<button @click="changeLogo">切换</button>
</div>
<h5>图片二</h5>
<img :src="imgUrl" />
</div>
</div>
</template>
<script>
export default {
name: "ImgTest",
data() {
return {
logoFlag: "vue",
imgUrl: "../assets/vue-logo.png",
};
},
methods: {
changeLogo() {
this.logoFlag = this.logoFlag === "vue" ? "react" : "vue";
},
},
};
</script>
<style scoped>