一些图片在`background-image:url()` 中不起作用

Question

Some images not working in background-image:url() , i cant figure out that does i need to remove ( and ) from image name or anything else is an issue?

any help will be appreciated.

here is an working and not working examples.

 <!-- Not Working --> <div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg)"> img </div> <!-- Working --> <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div>

Answer 1

Escape special characters ( \\ in front of ( and ) ) in the URL.

 <!-- Use CSS escape character to escape special characters --> <div style="background-image:url(https://ignite.galify.com/images/tx9gyzjfb24712-\\(1\\).jpg)"> img </div> <!-- Working --> <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div> 

Alternatively, use single quote ( ' ) to enclose the image URL:

 <!-- Use single quote (') to enclose image URL --> <div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div> <!-- Working--> <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div> 

Answer 2

Just add single quotation marks around the url. If you have special characters in your URL, you should use quotes or escape the characters. Give this a read for further information.

 Now Working <div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div> Working <div style="background-image:url(https://ignite.galify.com/images/9mspqz9gqb1561725209327568845756.jpg)"> img1 </div> 

Answer 3

尝试在url添加单引号：

<div style="background-image:url('https://ignite.galify.com/images/tx9gyzjfb24712-(1).jpg')"> img </div>

Answer 4

In my case I had an issue with some urls containing a single quote. Fixed it surrounding the url with " :

<div style="background-image: url(&quot; ${url} &quot;);"></div>