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 ends when the first non-escaped ) is found中的url令牌。

或者，您可以引用整个网址：

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

但是你需要转义引号。

用JSX取代CSS中的空格

1 个答案: