＃vue.js項目中，出現css調用background背景圖無效？如何解決？

或者調用<img>標簽，也無效果？
直接上代碼，自行對比查找一下：

---

效果圖預覽

---

1. 正確的代碼，示例如下：

<template><div class="demo"><!-- 成功引入的三種方法： --><!-- 圖1 --><div class="img1"></div><!-- 圖2 --><div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div><!-- 圖3 --><img src="~@/assets/img/pageBg.png" width="100"></div> </template><script> import Bg2 from '@/assets/img/pageBg.png'export default {name: 'App',data () {return {bg2: Bg2,或者:bg2: require('@/assets/img/pageBg.png')}} } </script><style>.demo{width: 100px;margin: 50px auto;}.img1{width: 100px;height: 100px;background: url('~@/assets/img/pageBg.png') center center no-repeat;background-size: 100px auto;}.img2{width: 100px;height: 100px;background-position: center center;background-repeat: no-repeat;background-size: 100px auto;} </style>

上述代碼中，出現了諸如：~@/ 和 @/ ，如果刪除后，測試效果也正常，你也可以都去掉，不影響。

2. 錯誤的代碼，截圖對比，如下：

報錯結果截圖如下：

修改為正確代碼方法，類比如下：

<div :style="{backgroundImage: 'url(https://cn.vuejs.org/images/logo.png)', width: '400px', height: '400px'}">foo</div>

---

相比其他方法：
如果你用了vue-cli腳手架，在build/utils.js中找到ExtractTextPlugin位置在對象中加入這句publicPath: '../../'就行了(本人未測試)。

---

以上就是關于“vue.js 引用背景圖 background 無效的3種解決辦法”的簡單介紹。

總結

以上是生活随笔為你收集整理的vue.js 引用背景图 background 无效的3种解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。