# Image url mismatch

**URL:** <https://community.hubspot.com/t/image-url-mismatch/118936>\
**Category:** Blog, Website & Page Publishing\
**Tags:** snippets, developer, website-pages, enterprise\
**Created:** [October 22, 2024, 5:50pm UTC](https://community.hubspot.com/t/image-url-mismatch/118936 "2024-10-22T17:50:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![WShek](https://avatars.discourse-cdn.com/v4/letter/w/7bcc69/32.png) [@WShek](https://community.hubspot.com/u/WShek)\
**Post date:** [October 22, 2024, 5:50pm UTC](https://community.hubspot.com/t/image-url-mismatch/118936/1 "2024-10-22T17:50:06Z")

</div>

I am trying to preload an image to improve my website performance.

Following is the code setup

```lia-code-sample
// module.html

{% require_css %}
 .container {
 background: url({{bg_image.src}});
 background-repeat: no-repeat;
 background-position: center;
 }
{% end_require_css %}

{% require_head %}
 {% if bg_image.src %}
 <link rel="preload" href={{bg_image.src}} as="image" />
 {% endif %}
{% end_require_head %}

```

The problem is the urls generated by the css and the link are different

css:

background: url({{bg\_image.src}}) → [https://mydomain/hubfs/image.webp](https://mydomain/hubfs/image.webp)

link tag:

https://{{hubspotId}}.fs1.hubspotusercontent-na1.net/hubfs/{{hubspotId}}/image.webp

Is there a way I can align the urls so the css can use the preloaded image?

---

<div class="post-metadata">

**Author:** ![evaldas](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/evaldas/32/69160_2.png) [@evaldas](https://community.hubspot.com/u/evaldas)\
**Post date:** [October 22, 2024, 6:24pm UTC](https://community.hubspot.com/t/image-url-mismatch/118936/2 "2024-10-22T18:24:04Z")

</div>

Hi @WShek,

There might be a more elegant solution to this, but in case there isn’t, you could try using a workaround with the ‘[replace](https://developers.hubspot.com/docs/cms/hubl/filters#replace)’ filter, i.e.:

```lia-code-sample
{% require_head %}
 {% if bg_image.src %}
 <link rel="preload" href={{bg_image.src|replace("https://{{hubspotId}}.fs1.hubspotusercontent-na1.net/hubfs/{{hubspotId}}/", "https://mydomain/hubfs/") }} as="image" />
 {% endif %}
{% end_require_head %}

```