用 CSS 替换 JSX 中的空格

Posted 2023-02-22

【中文标题】用 CSS 替换 JSX 中的空格

【英文标题】：Replacing White Space in JSX for CSS

【发布时间】：2017-05-18 07:06:06

【问题描述】：

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

【参考方案1】：

问题不在于空格，问题在于文件名中的结束括号。而不是用%20替换空格，而是用%29替换)：

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

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

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

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

但是你需要转义引号。

【讨论】：

哦，好的，我明白了！我能够做替代解决方案并且它有效。想知道为什么更换不起作用。我复制粘贴了第一个解决方案并得到了这个： no-Smoking-sign (1%29.png