react 动态设置 backgroundImage 图片不显示bug？

Question

问题：图片名含有空格 http://192.168.1.225:8099/ftp_show/sysOfficesInfo/20170608150706/timg (3).jpg

给div加背景图片

<div className="infoImg" style={{backgroundImage:"url("+img+")"}}>

然后背景图片不显示，通过调试发现图片名字有问题的图片background-image样式没写进去，图片名字没有空格的的样式正常写入，如图：

图片名字正常↑

图片名字含有空格的↑

黑人问号脸？？？

请问为什么react动态设置background-image样式图片名字有空格时样式不生效？

Answer 1

发现实际有更简单的办法，在括号内加一对双引号即可：

$0.style.backgroundImage = `url("${img}")`

更新。

---

遇到同样的问题。当尝试赋值给 backgroundImage 带空格的 url 时设置值会无效：

$0.style.backgroundImage = `url(${img})`

当然，这个图片直接赋值给 img 的 src 是没问题的，比较奇怪

$0.src = img

尝试把空格转义，然后设置给 backgroundImage 就没问题了

img = img.replace(/\s/g, encodeURIComponent(' '))
$0.style.backgroundImage = `url(${img})`

我是在用 vue 的指令时遇到的，网上搜的时候发现 angular 也一样会遇到此问题，跟框架无关，应该是 DOM 原生的处理，暂时没找到相关文档。

Answer 2

用require('yourimgpath')

Answer 3

这样试试
<div className="infoImg" style={{backgroundImage:{"url("+img+")"}}}>