Quiero eliminar el espacio en blanco de un campo de objeto para poder mostrarlo como una imagen de fondo en CSS usando JSX.
renderImage(singleMedia, type) { let mediaType = singleMedia.mediaType; if(type == "image")){ var mediaPreview = singleMedia.mediaPreview.replace(/\s+/g, '%20'); console.log("The original image was", singleMedia.mediaPreview, "The NEW ONE IS", mediaPreview); var divStyle = { backgroundImage: 'url(' + mediaPreview + ')' } } return( <div className="image-logo" style={divStyle}> </div> ); }Puedo renderizar bien la imagen si mediaPreview NO tiene espacios. Pero cuando tiene un espacio, todavía no puedo verlo incluso después de agregar el %20.
Cuando ejecuto mi código, obtengo los siguientes resultados: (Pero la salida aún está en blanco. La imagen solo se muestra si envío uno sin espacios en blanco)
the original image was http://api.testing.ca/media/ad/no-smoking-sign (1).png The NEW ONE IS http://api.testing.ca/media/ad/no-smoking-sign%20(1).pngMe pregunto si hay una forma de quitar el espacio en blanco y convertirlo a %20 dentro del divStyle.
El problema no es el espacio en blanco, el problema es el paréntesis final en el nombre del archivo. En lugar de reemplazar los espacios en blanco con %20 en lugar de reemplazar ) con %29 :
var mediaPreview = singleMedia.mediaPreview.replace(/\)/g, '%29'); El token de url en CSS finaliza cuando se encuentra el primer no ) .
Alternativamente, puede citar la URL completa:
var divStyle = { backgroundImage: 'url("' + mediaPreview + '")' }pero entonces necesitaría escapar de las comillas en su lugar.