我想从对象字段中删除空白,以便可以使用 JSX 将其显示为 CSS 中的背景图像。
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>
);
}
如果 mediaPreview 没有空格,我可以很好地渲染图像。但是当它确实有空格时,即使我添加了%20,我仍然无法查看它。
当我运行代码时,我得到以下结果:(但输出仍然是空白。图像仅在我发送没有空格的情况下显示)
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
我想知道是否有办法去除 divStyle 中的空白并将其转换为 %20?
最佳答案
问题不在于空格,问题在于文件名中的结束括号。不要用 %20
替换空格,而是用 %29
替换 )
:
var mediaPreview = singleMedia.mediaPreview.replace(/\)/g, '%29');
CSS 中的 url
标记 ends when the first non-escaped )
is found .
或者,您可以引用整个 URL:
var divStyle = {
backgroundImage: 'url("' + mediaPreview + '")'
}
但是你需要转义引号。
关于css - 替换 JSX 中的 CSS 空格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41456227/