vue :src后面地址为本地图片

Question

1，使用vue的时候，本地images/tempbanner目录下有很多图片，通过进入的时候路由会有个pageName,加入pageName为banner1;
2,直接使用<img src="./images/tempbanner/banner1.jpg'" alt="">图片可以打开，
3，由于图片是要根据pageName来变化，采用这种写法<img :src="'./images/tempbanner/'+pageName+'.jpg'" alt="">;图片无法打开，请问是什么情况？

Answer 1

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

Answer 2

一般我的图片都是放在static下的images，这样不管在开发环境还是打包的时候，都能保证找到。
这段代码虽然没用src，也使用到了引用的方式。其实你的还是路径的问题。对了，我打包的时候对路径要多加一层，所有会有一个环境的判断。
`
<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>`

Answer 3

如果图片数量可预期，应当显式的遍历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']">

Answer 4

要用绝对路径