why javascript removes forward slash from image url, how I can fix it?-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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 
        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>