我正在 JavaScript 中撰寫一些 HTML 代碼，其中我還使用行內 css 使用 background-img 屬性添加背景影像。但是在瀏覽器上沒有顯示影像，當我檢查控制臺影像路徑時，沒有正斜杠。
let cardsObject = [ { title:"FMCG-F&B", discription:"marketing and business planning",imgPath:"./images/firm3.jpg" } ] function cardShow() { let featCards =""; cardsObject.forEach(cObj=>{ featCards = ` <div class="card mr-2 mt-2" style= " background-image: url("${cObj.imgPath}"); background-size: cover; object-fit: contain; " > <div class="innerCard"> <h5 class="cardHeading text-center text-uppercase "> ${cObj.title} </h5> </div> <p class="cardDeatils"> ${cObj.discription} </p> </div> ` }) document.getElementById("featuresCards").innerHTML = featCards; }
在控制臺背景影像路徑顯示如下
背景圖片：url(".imagefirm3.jpg");
如果沒有正斜杠，任何人都可以建議我如何解決這個問題。
uj5u.com熱心網友回復：
這是對由您在background-image樣式中使用的雙引號引起的錯誤的簡單修復：
style=
"
background-image: url("${cObj.imgPath}");
background-size: cover;
object-fit: contain;
"
注意style屬性周圍的雙引號，然后包含另一個雙引號來包圍url影像路徑的 。
相反，將url引號切換為單引號（因此url("...")變為url('...')）：
style=
"
background-image: url('${cObj.imgPath}');
background-size: cover;
object-fit: contain;
"
這將完全按預期作業。
uj5u.com熱心網友回復：
事實上，您不需要引號來設定背景 url。可以設定為：-
background: url(${cObj.imgPath});
let cardsObject =
[
{
title:"FMCG-F&B", discription:"marketing and business planning",imgPath:"./images/firm3.jpeg"
}
];
(function cardShow() {
let featCards ="";
cardsObject.forEach((cObj) => {
featCards =
`
<div
style=
"
background: url(${cObj.imgPath});
background-size: cover;
object-fit: contain;
"
>
<div >
<h5 >
${cObj.title}
</h5>
</div>
<p >
${cObj.discription}
</p>
</div>
`
});
document.getElementById("featuresCards").innerHTML = featCards;
})();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="featuresCards"></div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/359064.html
標籤：javascript html css