vue踩坑之backgroundImage路徑問題及解決

更新時(shí)間：2022年10月12日 10:23:10 作者：小仙女de成長

這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue backgroundImage路徑問題

項(xiàng)目中圖片都放在src/img文件夾，img和background-image引用都用相對路徑，即../../這種形式

在打包build的設(shè)置路徑assetsPublicPath: ‘./‘，然后那些沒有轉(zhuǎn)成base64的背景圖都失效了，，路徑。

處理方法

使用require引入圖片

img標(biāo)簽

<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屬性非常常見，有很多時(shí)候需要使用內(nèi)聯(lián)樣式來綁定此屬性，但是在vue-cli項(xiàng)目中，如果如下面代碼填寫路徑會找不到圖片

使用require()方法，require()是node.js方法

vue style中設(shè)置background-image時(shí)的路徑問題

之前用的都是require方法

//常見并且常用的方式
<script>
?? ?data(){
?? ??? ?return{
?? ??? ??? ?list:[
?? ??? ??? ??? ?{url:require('../1.jpg')}
?? ??? ??? ??? ?{url:require('../2.jpg')}
?? ??? ??? ?]
?? ??? ?}
?? ?}
</script>

而我想直接在style上寫，不想費(fèi)勁的去在數(shù)據(jù)層寫了

實(shí)際上require這個(gè)函數(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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: