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')})`
? ? };
? }
}

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')}`
};
}
}

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)樣式。您可以將樣式包含在外部工作表中。

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
像這樣在 css 文件中嘗試
background-image: url('~src/assets/home-page-img/header-bg.jpg');

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
}
- 5 回答
- 0 關(guān)注
- 274 瀏覽
添加回答
舉報(bào)