1、在html标签里面使用：
<img
src="~@/assets/images/home/simple-auth-pass.png"
style="width:12px;height:21px;"
/>
<img width="105" height="91" src="@/assets/images/noData.png" alt />
<img class="logo" src="../../assets/images/footer-logo2.png" alt />
<el-image :src="require('@/assets/images/contactus-comb.png')"></el-image>
2、在css背景样式里使用：
<div
:style="activeType == 'noEval' ? 'background-image: url(' + fullImgUrl(dataItem.cover) + ')' : ' ' "
:class="{'bgCover':activeType !== 'noEval'}"
>1111</div>
<style lang="scss" rel="stylesheet/scss" scoped>
.bgCover {
background-image: url('~@/assets/images/v40/tradeImgbg.png');
}
</style>
3、在import里面引入：
import branchPng from '@/assets/Branch.png'
4、在data函数引入：
<img :src="fullImgUrl(imgUrl)" class="image" alt="图片" />
data() {
return {
imgUrl: '@/assets/images/banner_1.jpg'
}
},
// 展示完整图片路径
fullImgUrl(url) {
// console.log('fullImgUrl',url)
return url ? config.BaseImgUrl + url : ''
},
config.js文件：
import Env from '@/env'
export const BaseImgUrl =
Env[process.env.NODE_ENV] ?
(Env[process.env.NODE_ENV].NODE_ENV === 'dev' ? '服务器ip地址' + /rbtp/ : /rbtp/) : /rbtp/
env.js文件：
module.exports = {
development: {
NODE_ENV: 'dev',
ENV_API: '服务器ip地址',
},
testing: {
NODE_ENV: 'testing',
ENV: '',
},
production: {
NODE_ENV: 'production',
ENV_API: '/',
},
// Client_API:客户端渲染走的api，Server_API：服务器端渲染走的api
API_ENV: {
server_dev: {
Client_API: '开发服务器ip地址',
Server_API: '----',
},
server_test: {
Client_API: '测试服务器ip地址',
Server_API: '----',
},
server_prod: {
Client_API: '生产服务器ip地址',
Server_API: '---',
},
server_preprod: {
Client_API: '预生产服务器ip地址',
Server_API: '---',
},
},
}