vue 绑定图片相对路径

如上图所示，我们制作，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 绑定图片相对路径相关推荐

vue本地静态图片的路径问题解决方案
vue本地静态图片的路径问题解决方案参考文章: (1)vue本地静态图片的路径问题解决方案 (2)https://www.cnblogs.com/ranyonsue/p/11608760.html ...
vue 绑定背景图片、图片
vue 绑定背景图片最外面的div 样式为 background-repeat:no-repeat; 不填充 <div class="login-container" ...
在Vue 项目 webpack 打包中关于背景图片的路径问题
第一次发segmentfault ,记录一下关于最近生产环境,开发环境路径问题. 开发环境下我们可以在vue中引入相对路径,但在生产环境,会默认为根目录static,所以我们需要在config 目录下 ...
vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径？...
用vue-cli3脚手架新建的项目,在使用less设置背景图片的时候遇到了路径报错问题,该如何正确设置背景图片的路径? 项目目录如下: 现在在css文件中有一个全局样式common.less.使用的是 ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...
基于JavaWeb的医疗后台项目药品信息的图片上传和绑定图片路径问题(3)
点击传送-> 基于JavaWeb的医疗后台项目医生信息的分页展示和模糊查询实现(2) -----上篇博客写到了医疗项目的医生信息的分页展示和查询,今天来实现药品的管理----- 1.建表首先建 ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
vue html img标签绝对路径,vue cli使用绝对路径引用图片问题的解决
前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.很全面的. Vue是 ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...

vue 绑定图片相对路径

完整代码部分：

使用相对地址代码部分：

vue 绑定图片相对路径相关推荐

最新文章

热门文章