css - 替换 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');

CSS 中的 url 标记 ends when the first non-escaped ) is found .

或者，您可以引用整个 URL:

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

但是你需要转义引号。