Image url mismatch

Marketing & Content Hub Blog, Website & Page Publishing
, , ,
1

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

Following is the code setup

// 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

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?

2

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’ filter, i.e.:

{% 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 %}