5 回答

TA貢獻1806條經驗 獲得超8個贊
需要在url標簽內容周圍添加一組額外的括號:
computed: {
? heroImage() {
? ? return {
? ? ? backgroundImage: `url(${require('../assets/images/HeroImg.jpg')})`
? ? };
? }
}

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

TA貢獻1865條經驗 獲得超7個贊
您應該用引號將它們括起來。
從MDN來看,我們需要將圖像的路徑或 url 包裝成
背景圖像:url(“../../media/examples/lizard.png”);
<div?style="background-image:?url(../assets/images/HeroImg.jpg)"> ????Content?goes?here</div>
建議:
最好避免使用內聯樣式。您可以將樣式包含在外部工作表中。

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

TA貢獻1847條經驗 獲得超11個贊
html
<div class="yourDivClass">
Content goes here
</div>
CSS
.yourDivClass {
background: url('../assets/images/HeroImg.jpg') no-repeat center center / cover
}
- 5 回答
- 0 關注
- 256 瀏覽
添加回答
舉報