The Hidden Bug: Special Characters in Image URLs

Panic Mode On 🚨

A few days ago, I was working on a CMS content preview feature for my company’s website. Everything went smoothly… until suddenly the article background image disappeared.

• Thumbnail exist
• Article list exist
• The web running well no error in console
• I test my variable in console show the correct image URL
• But Background image? Completely gone!
• But if I check the other background images on the page were still there.

I became panic because it was on production and I have no idea why this happened.

My code looked perfectly fine:

const specialTypes = ["TROUBLESHOOT", "PROMO"];
const imageUrl = specialTypes.includes(String(type).toUpperCase())
                    ? aboutus
                    : image || aboutus;

return (
    <section
    className="relative flex justify-center items-center py-[90px]"
    style={{
        backgroundImage: `url(${imageUrl})`,
        backgroundSize: "cover",
        alignSelf: "center",
        backgroundPosition: "center",
    }} />
);

i already give it some condition and also the backup image but when i inspect the element in the browser magically happened my render code become like this

<section class="relative flex justify-center items-center py-[90px]"
  style="background-size: cover; align-self: center; background-position: center center;">
</section>

Did you see what happened here… why is my background-image missing?
In fact, the background image was taken from the same thumbnail image — so where’s the problem?

I Investigate

As programmers, we always have to investigate further.

Is it an invalid URL? But if it was invalid, why did the background-image property completely disappear from my inline style?
Why was everything vanished?

Curious, I checked my backend service (written in Go). On the network tab in my browser everything still looked fine: status 200 OK, and the response clearly contained the image URL.

After I searched and investigated more about this issue, I finally spotted something unusual.

The background image wasn’t missing because of the backend, nor because the file wasn’t uploaded.
The real problem came from the URL itself.

The Culprit: Weird Characters in URL

I discovered a clue about why this bug happened. It turns out my image URL contained special characters — specifically ( and ) in the file name.

When I researched further, I learned that browsers don't like these characters if you use them directly in style={{ backgroundImage }}.

As a result, the browser automatically removes the style, so the background image disappears.

Funny enough, because if you use <img src="...">, the image still shows up just fine.
But as soon as you use it as a background-image: url(...), the browser drops it completely. please every browser fix it 🙂.

The Solution 💡

To solve this, the answer was simple: URL encoding.
Special characters like ( and ) must be converted to their safe representations (%28 and %29) according to the RFC 3986 standard.

So here's a simple helper I made in Javascript:

const encodeUrl =
  typeof image === "string"
    ? image.replace(/\(/g, "%28").replace(/\)/g, "%29")
    : aboutus;

And then use it like this:

<section
  style={{
    backgroundImage: `url(${encodeUrl})`,
  }}
>
  {/* ...content... */}
</section>

Finally… the image appeared perfectly! 🎉

Lessons Learned

• Always check your URLs if an asset (image, video, etc.) mysteriously disappears.
• Special characters in URLs ((), [ ], spaces, etc.) need to be encoded.
• Browsers are “forgiving” with <img>, but very strict with background-image.

Closing

Sometimes a production bug can make you panic, but the solution is just one line of code.
Hope this tip about URL encoding helps fellow developers!

If you've ever faced a weird bug like this, share