亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何設置本地文件的背景圖片url?

如何設置本地文件的背景圖片url?

慕田峪4524236 2023-10-17 16:01:08
我想將相對圖像 url 粘貼到 div 以將其設置為背景圖像。不幸的是 div 不會渲染圖像。所以這工作正常并渲染圖像<img src="../assets/images/HeroImg.jpg">但這個沒有<div style="background-image: url(../assets/images/HeroImg.jpg)">     Content goes here     </div>我也嘗試過的事情:將 url 括在單引號內assets/images/HeroImg.jpg或許?./assets/images/HeroImg.jpg從src文件夾開始images/HeroImg.jpg并./images/HeroImg.jpg從資產文件夾開始用于背景圖像的正確網址是什么?更新我使用的是 VueJs,所以這里的情況可能會有所不同?重現步驟:使用 Vue CLI 創建新項目在中創建一個images目錄src/assets創建一個圖像src/assets/images并調用它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 標簽渲染圖像,但不渲染帶有背景圖像的 div。
查看完整描述

5 回答

?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

需要在url標簽內容周圍添加一組額外的括號:


computed: {

? heroImage() {

? ? return {

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

? ? };

? }

}


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

TA貢獻1921條經驗 獲得超9個贊

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


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


<template>

  <div id="app">

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

        Content without background image

    </div>

  </div>

</template>

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


computed: {

  heroImage() {

    return {

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

    };

  }

}


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

TA貢獻1865條經驗 獲得超7個贊

您應該用引號將它們括起來。

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

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

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

建議:

最好避免使用內聯樣式。您可以將樣式包含在外部工作表中。


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

TA貢獻1828條經驗 獲得超4個贊

像這樣在 css 文件中嘗試

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


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

TA貢獻1847條經驗 獲得超11個贊

html


<div class="yourDivClass">

    Content goes here

</div>

CSS


.yourDivClass {

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

}


查看完整回答
反對 回復 2023-10-17
  • 5 回答
  • 0 關注
  • 256 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號