鍍金池/ 問答/HTML5  HTML/ vue :src后面地址為本地圖片

vue :src后面地址為本地圖片

1，使用vue的時候，本地images/tempbanner目錄下有很多圖片，通過進入的時候路由會有個pageName,加入pageName為banner1;
2,直接使用<img src="./images/tempbanner/banner1.jpg'" alt="">圖片可以打開，
3，由于圖片是要根據(jù)pageName來變化，采用這種寫法<img :src="'./images/tempbanner/'+pageName+'.jpg'" alt="">;圖片無法打開，請問是什么情況？

回答
編輯回答
故林

F12看一下img的src是否正確。

2018年3月27日 06:35
編輯回答
柒槿年

一般我的圖片都是放在static下的images，這樣不管在開發(fā)環(huán)境還是打包的時候，都能保證找到。
這段代碼雖然沒用src，也使用到了引用的方式。其實你的還是路徑的問題。對了，我打包的時候?qū)β窂揭嗉右粚?，所有會有一個環(huán)境的判斷。
`
<template>
<div class="empty">

<div class="empty-bg" :style="{'background':'url('+imgPath+'/static/images/'+img+'.png) no-repeat','backgroundSize':'contain'}"></div>
<div class="empty-tip" v-html="tip"></div>

</div>
</template>

<script>
export default {

name: 'empty',
props:{
  tip:String,
  img:String
},
data () {
  return {
    imgPath:process.env.NODE_ENV==='development'?'':'/vp'
  }
},
created () {}

}
</script>`

2018年6月22日 17:25
編輯回答
六扇門

如果圖片數(shù)量可預(yù)期，應(yīng)當(dāng)顯式的遍歷pageName用require將圖片地址解析并存儲的對象中，代碼如

let pageNameArr = ['index', 'view', 'list'];
let pageNameRealUrls = {};
pageNameArr.forEach((v)=>{
    pageNameRealUrls[v] = require(`./images/tempbanner/${v}.jpg`);
});
this.pageNameRealUrls = pageNameRealUrls;

在dom中就這樣使用即可：

<img :src="pageNameRealUrls['index']">
2017年1月6日 21:30
編輯回答
大濕胸

要用絕對路徑

2017年12月7日 12:53