html中css图片链接地址中有-括号不显示的解决办法

html中css图片链接地址中有（）括号不显示的解决办法

出现的问题代码如下：

<style>
.test-image {
  width: 500px;
  height: 500px;
  background-image: url(http://192.168.1.222:8080/web-image/测试（2）.png);
}
</style>

上面的代码写法上没有什么问题，但是div中的背景图片是无法显示的，通过谷歌浏览器的开发者调试工具打开也会发现background-image的样式消失了，那是因为图片链接地址中出现了括号，解决办法就是将图片链接地址用引号包裹起来就行了，代码如下：

.test-image {
  width: 500px;
  height: 500px;
  background-image: url('http://192.168.1.222:8080/web-image/测试（2）.png');
}

vue3计算属性动态设置图片代码示例如下 ：

const style = computed(() => {
    return {
        width: '500px',
        height: '500px',
        backgroundImage: `url('${imageUrl}')`
    }
})