第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何設(shè)置本地文件的背景圖片url?

如何設(shè)置本地文件的背景圖片url?

慕田峪4524236 2023-10-17 16:01:08
我想將相對圖像 url 粘貼到 div 以將其設(shè)置為背景圖像。不幸的是 div 不會(huì)渲染圖像。所以這工作正常并渲染圖像<img src="../assets/images/HeroImg.jpg">但這個(gè)沒有<div style="background-image: url(../assets/images/HeroImg.jpg)">     Content goes here     </div>我也嘗試過的事情:將 url 括在單引號內(nèi)assets/images/HeroImg.jpg或許?./assets/images/HeroImg.jpg從src文件夾開始images/HeroImg.jpg并./images/HeroImg.jpg從資產(chǎn)文件夾開始用于背景圖像的正確網(wǎng)址是什么?更新我使用的是 VueJs,所以這里的情況可能會(huì)有所不同?重現(xiàn)步驟:使用 Vue CLI 創(chuàng)建新項(xiàng)目在中創(chuàng)建一個(gè)images目錄src/assets創(chuàng)建一個(gè)圖像src/assets/images并調(diào)用它HeroImg更新 App.vue 文件<template>  <div id="app">    <div>      This works:    </div>    <div>      <img src="./assets/images/HeroImg.jpg">    </div>    <div>      This doesn't work:    </div>    <div style="background-image: url('./assets/images/HeroImg.jpg')">        Content without background image    </div>  </div></template>您將看到 img 標(biāo)簽渲染圖像,但不渲染帶有背景圖像的 div。
查看完整描述

5 回答

?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

需要在url標(biāo)簽內(nèi)容周圍添加一組額外的括號:


computed: {

? heroImage() {

? ? return {

? ? ? backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`

? ? };

? }

}


查看完整回答
反對 回復(fù) 2023-10-17
?
郎朗坤

TA貢獻(xiàn)1921條經(jīng)驗(yàn) 獲得超9個(gè)贊

當(dāng)您使用相對路徑時(shí),如果在內(nèi)聯(lián)屬性中找到它們,Webpack 將無法正確解析它們style。但是,如果直接將圖像路徑用作<img>模板中的元素源,Webpack 可以正確解析圖像路徑。因此,使用解析的圖像路徑作為 CSS 屬性的解決方案是簡單地將其作為計(jì)算屬性引用。


在模板中,您可以用來v-bind:style="heroImage"引用計(jì)算屬性:


<template>

  <div id="app">

    <div v-bind:style="heroImage">

        Content without background image

    </div>

  </div>

</template>

然后,在您的 VueJS 組件本身中,您可以執(zhí)行以下操作:


computed: {

  heroImage() {

    return {

      backgroundImage: `url${require('../assets/images/HeroImg.jpg')}`

    };

  }

}


查看完整回答
反對 回復(fù) 2023-10-17
?
鴻蒙傳說

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

您應(yīng)該用引號將它們括起來。

從MDN來看,我們需要將圖像的路徑或 url 包裝成

背景圖像:url(“../../media/examples/lizard.png”);

<div?style="background-image:?url(../assets/images/HeroImg.jpg)">
????Content?goes?here</div>

建議:

最好避免使用內(nèi)聯(lián)樣式。您可以將樣式包含在外部工作表中。


查看完整回答
反對 回復(fù) 2023-10-17
?
明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

像這樣在 css 文件中嘗試

background-image: url('~src/assets/home-page-img/header-bg.jpg');


查看完整回答
反對 回復(fù) 2023-10-17
?
回首憶惘然

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊

html


<div class="yourDivClass">

    Content goes here

</div>

CSS


.yourDivClass {

  background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover

}


查看完整回答
反對 回復(fù) 2023-10-17
  • 5 回答
  • 0 關(guān)注
  • 274 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號