Vue webpack打包src路径问题

  |  
阅读次数
  |  
字数 599
  |  
时长 ≈ 3 分钟

使用vue的时候,因为图片路径为动态数据,下面这样直接将数据传入元素,编译输出后路径将会是原始相对路径的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div id="cover-container">
<template v-for="(cover,index) in coverList">
<div :key="index" @click="openPage(cover.url)" class="cover">
<template v-if="index === 0">
<span class="cover_title">{{cover.title}}</span>
<img v-bind:src="cover.banner" class="cover_img_top">
</template>
<template v-else>
<img v-bind:src="cover.banner" class="cover_img_other">
</template>
<span class="cover_desc" v-html="cover.desc"></span>
</div>
<span v-if="index!=coverList.length-1" :key="index" class="line"></span>
</template>
</div>
</template>

所以需要在数据上面做处理,在url上面加上require,如下:

1
2
3
4
5
6
7
8
9
10
var coverList = [{
title: '营业厅服务',
banner: require('../assets/bizhall_1.jpg'),
url: 'https://im.189.cn/weixinopen/outserver/oauth/getOpenid?url=aHR0cHM6Ly9pbS4xODkuY24veG10L3BhZ2VPcGVuTG9nL3JlbGF5LmRvP3VybD1hSFIwY0RvdkwybHRMakU0T1M1amJpOTRiWFF2YjNCbGNtRjBMMmRsZEU5d1pYSmhkRXhwYzNSRGVpNWtidz09Jm9wPXl5dGN6Y2Q=',
desc: '可通过筛选发现附近营业厅及查询营业厅相关信息'
}, {
banner: require('../assets/bizhall_2.jpg'),
url: 'http://im.189.cn/weixinopen/outserver/oauth/getOpenid?url=aHR0cHM6Ly9pbS4xODkuY24veG10L3BhZ2VPcGVuTG9nL3JlbGF5LmRvP3VybD1hSFIwY0RvdkwybHRMakU0T1M1amJpOXBiVmQ0VUdGamEyRm5aWE12Y0dGamEyRm5aWE12YjNCbFlYSjBMbVJ2Jm9wPXl5dHl5Y2Q=',
desc: '预约营业厅办理业务及时查看排队情况,</br>使用前确认已经打开授权微信获取定位功能'
}]

这样webpack在打包的时候就会自动将图片相对路径转化为项目路径了

也可以通过下面的方式:

要注意的是,在js里面写require的时候不能直接使用require(路径),而需要像下面那样分开两部分来拼接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<template>
<div id="cover-container">
<template v-for="(cover,index) in coverList">
<div :key="index" @click="openPage(cover.url)" class="cover">
<template v-if="index === 0">
<span class="cover_title">{{cover.title}}</span>
<img :src='requireSrc(cover.banner)' class="cover_img_top">
</template>
<template v-else>
<img :src='requireSrc(cover.banner)' class="cover_img_other">
</template>
<span class="cover_desc" v-html="cover.desc"></span>
</div>
<span v-if="index!=coverList.length-1" :key="index" class="line"></span>
</template>
</div>
</template>

<script>
export default {
name: 'Cover',
props: {
coverList: Array
},
methods: {
openPage: function (url) {
window.location.href= url;
},
requireSrc: function(src){
return require("../assets/" + src)
}
}
}
</script>

数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var coverList = [{
title: '营业厅服务',
banner: 'bizhall_1.jpg',
url: 'https://im.189.cn/weixinopen/outserver/oauth/getOpenid?url=aHR0cHM6Ly9pbS4xODkuY24veG10L3BhZ2VPcGVuTG9nL3JlbGF5LmRvP3VybD1hSFIwY0RvdkwybHRMakU0T1M1amJpOTRiWFF2YjNCbGNtRjBMMmRsZEU5d1pYSmhkRXhwYzNSRGVpNWtidz09Jm9wPXl5dGN6Y2Q=',
desc: '可通过筛选发现附近营业厅及查询营业厅相关信息'
}, {
banner: 'bizhall_2.jpg',
url: 'http://im.189.cn/weixinopen/outserver/oauth/getOpenid?url=aHR0cHM6Ly9pbS4xODkuY24veG10L3BhZ2VPcGVuTG9nL3JlbGF5LmRvP3VybD1hSFIwY0RvdkwybHRMakU0T1M1amJpOXBiVmQ0VUdGamEyRm5aWE12Y0dGamEyRm5aWE12YjNCbFlYSjBMbVJ2Jm9wPXl5dHl5Y2Q=',
desc: '预约营业厅办理业务及时查看排队情况,</br>使用前确认已经打开授权微信获取定位功能'
}]

export default {
coverList: coverList
}