用JSX替换CSS中的空格

Question

我想从对象字段中删除空白区域,以便我可以使用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？

Answer 1

问题不在于空格,问题是文件名中的结束括号.而%20不是替换为替换白色空间而是替换)为%29:

var mediaPreview = singleMedia.mediaPreview.replace(/\)/g, '%29');

urlCSS中的令牌在找到第一个非转义时结束).

或者,您可以引用整个网址:

var divStyle = {
  backgroundImage: 'url("' + mediaPreview + '")'
}

但是你需要转义引号.