?問題描述
打包后的項(xiàng)目啟動之后，背景圖片沒有成功加載，只有一片空白。此時打開調(diào)試工具可以看到,electron自動把圖片路徑加上了/img/
?我們這時打開打包后的dist_electron文件夾，打開bundled\img目錄,
?這就是上面報錯的路徑。
?解決方法:
對于背景圖片,不要使用如下background:url('..')的形式,這樣寫會在 npm run electron:build 打包之后，背景圖片路徑找不到。
.box {
background: url('@/assets/mainbg.png'); //錯誤寫法
background-size: cover;
width: 100%;
height: 100vh;
}?這時使用img標(biāo)簽當(dāng)背景圖片就不會出現(xiàn)問題
<img
src="../assets/mainbg.png"
style="
width: 100%;
height: 100%;
position: fixed;
-webkit-user-drag: none;
"
/>圖片寬高設(shè)置100% , position設(shè)置為fixed，這樣使img標(biāo)簽不占位，不會影響文檔流。文章來源：http://www.zghlxwxcb.cn/news/detail-706449.html
?-webkit-user-drag: none??用戶鼠標(biāo)不能拖動此背景圖片。文章來源地址http://www.zghlxwxcb.cn/news/detail-706449.html
到了這里，關(guān)于Electron-builder打包vue項(xiàng)目后,背景圖片不加載的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
