I am writing some HTML code inside JavaScript where I also used inline css to add background-image using background-img property. But on browser image is not showing and when I checked in console image path is doesn't have forward slash.
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; }
in console background image path is showing like this
background-image: url(". images firm3.jpg");
without forward slashes can anyone suggest me how I can fix this issue.
This is a simple fix to an error caused by the double-quotes you are using in your background-image style:
style=
"
background-image: url("${cObj.imgPath}");
background-size: cover;
object-fit: contain;
"
Note the double-quote surrounding the style attribute that then contains another double-quote to surround the url of the image path.
Instead, switch the url quotes to singles (so url("...") becomes url('...')):
style=
"
background-image: url('${cObj.imgPath}');
background-size: cover;
object-fit: contain;
"
And this will work exactly as expected.
In fact you dont need the quotes for setting background url. can be set as :-
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 class="card mr-2 mt-2"
style=
"
background: 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;
})();<!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>