Замена белого пространства в JSX для CSS

Question

Я хочу удалить пробел из поля объекта, чтобы я мог отображать его как фоновое изображение в CSS с помощью JSX.

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 

мне интересно, если есть способ удалить пробел и преобразовать его в% 20 в divStyle?

Answer 1

Проблема не в пробеле, проблема заключается в концевой скобке в имени файла. Вместо того чтобы заменить белое пространство %20 вместо замены ) с %29:

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

В url фишку в CSS ends when the first non-escaped ) is found.

В качестве альтернативы, вы можете процитировать весь URL:

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

, но тогда вы должны экранировать кавычки вместо.