vue中引入图片

vue.js中引入图片不显示的问题

vue中引入图片时，会显示不出来，除非在css中引入。而在template中或者js动态引入时，会显示不出图片。

解决办法一

图片通过后端返回引入网络图片路径即可。

<div class="banner-item"
  :style="{'background': `url(${$base.urlImage}${item.shufflingUrl})`,'background-size':'cover'}">
</div>

解决办法二

通过require引入图片

<script>
  export default {
    data() {
      return {
        imgUrl: {
          src: require('../assets/images/index/banner.png'),
        }
      }
    }
  }
</script>

<script>
  require oBanner from '../assets/images/index/banner.png'
  export default {
    data() {
      return {
        imgUrl: {
          src: oBanner,
        }
      }
    }
  }
</script>

以上就为两种图片引入不显示的问题。希望对大家有帮助。