vue踩坑之backgroundImage路徑問題及解決
更新時間：2022年10月12日 10:23:10 作者：小仙女de成長
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue backgroundImage路徑問題
項目中圖片都放在src/img文件夾，img和background-image引用都用相對路徑，即../../這種形式
在打包build的設置路徑assetsPublicPath: ‘./‘，然后那些沒有轉成base64的背景圖都失效了，，路徑。
處理方法
使用require引入圖片
img標簽
<img :src="require('assets/img/header/search.png')">背景圖
<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>
<span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}">
</span>也可以下面這種方式去寫
在前端開發(fā)中，background-image屬性非常常見，有很多時候需要使用內聯(lián)樣式來綁定此屬性，但是在vue-cli項目中，如果如下面代碼填寫路徑會找不到圖片
使用require()方法，require()是node.js方法
vue style中設置background-image時的路徑問題
之前用的都是require方法
//常見并且常用的方式
<script>
?? ?data(){
?? ??? ?return{
?? ??? ??? ?list:[
?? ??? ??? ??? ?{url:require('../1.jpg')}
?? ??? ??? ??? ?{url:require('../2.jpg')}
?? ??? ??? ?]
?? ??? ?}
?? ?}
</script>而我想直接在style上寫，不想費勁的去在數(shù)據(jù)層寫了
實際上require這個函數(shù)是可以直接在style里面加的與上同理上
代碼如下↓
//奇奇怪怪的方式，很少能用到，不過這次我用到了
<template>
?? ?<div class="list">
? ? ? ? ? ? ? ? ? ? <div v-for="(item,key) in 9" :key="key" class="li">
? ? ? ? ? ? ? ? ? ? ? ? <div class="inner">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div :style="'background-image:url('+require('./../assets/examples/'+item+'.jpg')+')'" class="img"></div>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <!--可以直接在倆加號中間寫require('圖片路徑') ?-->
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
</template>以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了VUE Elemen-ui之穿梭框使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了vue使用SVG實現(xiàn)圓形進度條音樂播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue3常用的API使用簡介，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-03-03
這篇文章為大家詳細介紹了vue.js中$watch的用法，文中給出了示例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，有需要的朋友們可以一起看看吧。2016-10-10
Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解
今天小編就為大家分享一篇Vue 使用Props屬性實現(xiàn)父子組件的動態(tài)傳值詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vuejs如何清空表單數(shù)據(jù)、刪除對象中的空屬性公共方法
這篇文章主要介紹了vuejs如何清空表單數(shù)據(jù)、刪除對象中的空屬性公共方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
在for循環(huán)中生成的元素要加key屬性不僅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其實都不是必須的，因為在 Vue和React中不加key是不會報錯的，只是會有警告。但是我們在深入了解加key的原因后會明白，若想確保沒有隱患的話，元素還是必須要加key屬性。2021-05-05
這篇文章主要介紹了詳解vue-router和vue-cli以及組件之間的傳值,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vue是一套用于構建用戶界面的漸進式框架。這篇文章主要介紹了Vue.js圖片預覽插件的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
由于某些限制，vue2不能檢測到某些情況下數(shù)組的變動，本文就將具體講解這兩種限制的解決思路2021-06-06