vue.js中引入图片

时间:2021-04-09 17:12:02

vue中引入图片

前言: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>
以上就为两种图片引入不显示的问题。希望对大家有帮助。