<img ref = 'test'></img>
this.$refs.test.src = require('../../static/httpdemo/111.png')
<div ref = 'test'></div>
this.$refs.test.style.background = 'url(' + require('../../static/httpdemo/111.png') + ')'
// webpack會將../../../static/httpdemo/下全部圖片打包。
<img :src = "require('../../../static/httpdemo/' + id)" v-show="id"></img>
<div :style = "'background: src(' + require('../../../httpdemo' + id) + ')'"></div>
<template>
<div>
<zy-header :headerTitle="$route.meta.title" :rightShow="true"></zy-header>
<div class="container">
// 經過:src設置圖片路徑
// 若是在頁面初始化時或者在操做過程當中將imgName值賦爲'',這時頁面會顯示找不到圖片,最好加上v-show。
<img ref="test" class="test" :src="img" v-show="imgName"></img>
// 經過:style設置背景圖路徑
<div class="test" :style="backgroundimg"></div>
</div>
</div>
</template>
<script>
import ZyHeader from '../../components/ZyHeader'
export default {
data () {
return {
imgName: '111.png', // 圖片名初始化,後面經過修改imgName的值動態更換圖片
bgImgName: '111.png' // 背景圖初始化
}
},
components: {
ZyHeader
},
computed: {
// 圖片
img () {
return this.imgName ? require('../../../static/httpdemo/' + this.imgName) : ''
},
// 背景圖
backgroundimg () {
return this.imgName ? {
backgroundImage: 'url(' + require('../../../static/httpdemo/' + this.bgImgName) + ')',
backgroundRepeat: 'no-repeat',
backgroundSize: '25px auto'
} : {}
}
}
}
</script>
<style scoped>
.test{
width:100px;
height:100px;
}
</style>