Is there a way to remove white space from an object field in order to display it as a background image in CSS using 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>
);
}
While I can render the image successfully if mediaPreview contains no spaces, I am still unable to view it even after adding %20.
Upon running my code, the following results appear: (However, the output remains blank. The image only displays when sent without any white space)
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).png
I'm curious if there is a way to strip the white space and convert it to %20 within the divStyle itself.