如上圖所示，我們制作，tab切換功能，但是因為字體的原因，我們這里選擇tab切換時，使用圖片進行替換。但是 使用過程中發現一個問題，vue綁定圖片“相對地址” 圖片并不能展示出來。

---

完整代碼部分：

<template> <div class="zuop-award"><div class="work-title"><img src="../../../../src/assets/images/zuop_award/title.png" alt="" /></div><div class="work-prize"><div class="prize-rank"><divv-for="(item, index) in tabList":key="`list_${index}`"class="list-title"@click="changeTab(item)"><div :class="[item.active ? 'title-active' : 'default']"><img v-if="item.active" :src="item.afterSrc" alt="" /><img v-else :src="item.beforeSrc" alt="" /></div></div></div></div><div class="work-content"><div v-if="tab === 1">11111</div><div v-if="tab === 2">2222</div><div v-if="tab === 3">3333</div></div> </div> </template><script> export default { name: "ZuopAward", data() {return {tab: 1,tabList: [{id: 1,name: "一等獎",active: true,beforeSrc: require("../../../../src/assets/images/zuop_award/one.png"),afterSrc: require("../../../../src/assets/images/zuop_award/one2.png")},{id: 2,name: "二等獎",active: false,beforeSrc: require("../../../../src/assets/images/zuop_award/two.png"),afterSrc: require("../../../../src/assets/images/zuop_award/two2.png")},{id: 3,name: "三等獎",active: false,beforeSrc: require("../../../../src/assets/images/zuop_award/three.png"),afterSrc: require("../../../../src/assets/images/zuop_award/three2.png")}]}; }, methods: {changeTab(node) {this.tab = node.id;this.tabList.forEach(v => {v.active = false;});node.active = !node.active;} } }; </script> <style lang="scss" scoped> @import "../../../style/common.scss"; .zuop-award { background: url("../../../../src/assets/images/zuop_award/bg734.png")no-repeat; background-size: 100% 100%; width: 100%; font-size: 14px; height: rem(2609); .work-title {display: flex;justify-content: center;img {height: rem(120);} } .work-prize {margin-top: rem(20);.prize-rank {display: flex;justify-content: space-evenly;color: #fff;width: 80%;margin-left: 10%;color: #fff;.list-title {.title-active {color: blue;}.default {color: #fff;}img {width: rem(75);height: rem(80);object-fit: contain;}}} } .work-content {color: #fff;text-align: center; } } </style>

使用相對地址代碼部分：

name: "ZuopAward",data() {return {tab: 1,tabList: [{id: 1,name: "一等獎",active: true,beforeSrc: "../../../../src/assets/images/zuop_award/one.png",afterSrc: "../../../../src/assets/images/zuop_award/one2.png"},{id: 2,name: "二等獎",active: false,beforeSrc: "../../../../src/assets/images/zuop_award/two.png",afterSrc: "../../../../src/assets/images/zuop_award/two2.png"},{id: 3,name: "三等獎",active: false,beforeSrc: "../../../../src/assets/images/zuop_award/three.png",afterSrc: "../../../../src/assets/images/zuop_award/three2.png"}]};},

發現如果使用相對地址的話，圖片根本無法展示出來，但我們使用了require，這時候，圖片就可以完全展示出來了。

總結

以上是生活随笔為你收集整理的vue 绑定图片相对路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。