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>`