动态style中backgroundImage的url无法显示问题

1. 组件背景采用图片上传后，返回图片路径，更新前端数据，重新渲染页面。
2. 因动态样式style的背景图是由js采用ES6模板字符串拼接而来，无法显示背景，如下:

// this.host:服务器地址 ， imgUrl：图片路径 
style.backgroundImage = `url(${this.host + imgUrl})`

1. 当该参数当成 ing 的 src 路径时是可以查看到图片的

<img :src="`${host + imgUrl}`"/>

1. 查看多个上传图片，发现查找产生原因

2. 问题一 ：路径中，图片名称含有特殊符号或者空格 。

因为图片是通过url路径去获取的资源 ，相当于请求一个路径，所以要采用 encodeURI()方法进行处理 

 style.backgroundImage = `url(${encodeURI(this.host + imgUrl)})`

1. 问题二：有些含有小括号（）的图片路径也无法识别，

url引入路径相当于传入路径参数 ,一般用法是url(imgUrl),如果imgUrl里含有小括号（）就无法识别参数 ，与参数输入开始的‘(’右括号与参数结束的‘)’左括号产生冲突。解决方案是，把imgUrl用双引号”” 或者单引号”括起来，当成字符串传入即可：url(‘imgUrl’)

// 1.处理方案
let url = encodeURI(this.host + imgUrl)
style.backgroundImage = 'url("' + url + '")'
// 或者
style.backgroundImage = `url('${url}')`



// 2 ，综合写法
style.backgroundImage = `url('${encodeURI(this.host + imgUrl)}')`

今天的文章动态style中backgroundImage的url无法显示问题分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。