Image url mismatch

[WShek]

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? 

[evaldas · Accepted solution]

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