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