Estoy escribiendo un código HTML dentro de JavaScript donde también usé CSS en línea para agregar una imagen de fondo usando la propiedad background-img. Pero en la imagen del navegador no se muestra y cuando verifiqué en la ruta de la imagen de la consola no tiene una barra inclinada.
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; }
en la ruta de la imagen de fondo de la consola se muestra así
imagen de fondo: url(". imágenes firm3.jpg");
sin barras diagonales, ¿alguien puede sugerirme cómo puedo solucionar este problema?
Esta es una solución simple a un error causado por las comillas dobles que está utilizando en su estilo background-image :
style= " background-image: url("${cObj.imgPath}"); background-size: cover; object-fit: contain; " Tenga en cuenta las comillas dobles que rodean el atributo de style que luego contiene otras comillas dobles para rodear la url de la ruta de la imagen.
En su lugar, cambie las comillas de url a simples (para que url("...") se convierta en url('...') ):
style= " background-image: url('${cObj.imgPath}'); background-size: cover; object-fit: contain; "Y esto funcionará exactamente como se esperaba.
De hecho, no necesita las comillas para configurar la URL de fondo. se puede configurar como: -
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>