0
137
VistasLa configuración de backgroundImage en línea no funciona en React
Estoy usando una función que devolverá la ruta completa de la imagen.
const imagePath = (imagePath) => { const domainPath = "http://localhost:9005/gallery/original/"; const fullImagePath = domainPath + imagePath; return fullImagePath; };Ahora, si uso el siguiente código, funcionará y mostrará la imagen en el navegador:
<img src={imagePath(item.mediaPath)} alt="cow images" />Pero si uso el siguiente código, NO funcionará:
<div className="bg-image-blur" style={{ backgroundImage: "url(" + imagePath(item.mediaPath) + ")", }} ></div> Consulte la imagen a continuación de mi elemento de inspección. El estilo se agrega al elemento:
y tampoco funcionará si no uso la función imagePath :
<div className="bg-image-blur" style={{ backgroundImage: "url(" + "http://localhost:9005/gallery/original/" + id.mediaPath + ")", }} ></div>Cual es el problema ?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
No funciona porque no has puesto '' para url . Y le sugiero que use literales de plantilla para su concatenación de cadenas en su lugar para una apariencia más fácil
<div className="bg-image-blur" style={{ backgroundImage: `url('${imagePath(item.mediaPath)}')`, }} ></div> Puede consultar este documento para comprender cómo se ve background-image con url
·
Juan Pablo Isaza
Denunciar
Responde la pregunta