Join the Webstudio community

Updated 2 months ago

Resource loading on built website

At a glance
The community member has finished the first version of their website, which works perfectly when built and hosted by webstudio. However, when they use the CLI to build the project and enter the localhost, a few issues arise:

1. The images from external links on the downloads page are not showing up on the localhost or when hosted on Vercel.

2. The favicon does not load, returning a 400 error.

3. The downloaded file is null (0 bytes).

The community members have tried various configurations, including turning off the optimizer and using the --preview flag, which resolved the image issue. However, the file download problem remains, and the favicon issue persists when hosted on Vercel.

Useful resources
Hey, I have finally finished the first version of this website, and everything works perfect when built and hosted by webstudio here: https://clickett-beta.wstd.io/
When I use the CLI to build the project and enter the localhost, a couple things are no longer working.
On the downloads page, I have 5 images pulled from various places externally, such as github links for the 3 large images: example
These are all not showing on the localhost, as well as when hosted on vercel.
Here is the download page working as it should: https://clickett-beta.wstd.io/download
Here is the vercel-hosted one not working: https://clickett.app/download
(Just cancel the automatic download)

The 3 problems:
  • Images from external links return 404
  • Favicon does not load (return 400)
  • Downloaded file is null (0 bytes)
I have attached an image of the errors in the console which is the same on the localhost and vercel host
It looks like webstudio has added to the beginning of the original links of the images
This is the code I use for the download:
Plain Text
downloadFile("website.com/file.exe","download name");

function downloadFile(url, fileName) {
  fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(res => {
      const aElement = document.createElement('a');
      aElement.setAttribute('download', fileName);
      const href = URL.createObjectURL(res);
      aElement.href = href;
      aElement.setAttribute('target', '_blank');
      aElement.click();
      URL.revokeObjectURL(href);
    });
};

I am building using the webstudio CLI on the latest version, and have tried the vanilla and vercel configurations.
Thank you!
Attachment
image.png
O
N
30 comments
do those images exist in your folder after the sync?
My intention is to have the images on the actual website be pulled from those original sources instead of the folder so they can be updated without a rebuild\deploy
oh I think you just need to turn off the optimizer, basically you are saying the image is on some other service via http
Ah I tried that already but it still wasn't working, but when I test by changing some text I see thats also not changing either so I'll need to use some other command to actually rebuild this
after changing the setting, did you publish on webstudio before syncing?
you need to use a dev version or publish first
or you might have not received the change
there is a flag --preview that allows you to get the version you see on canvas without publishign
Okay amazing so it grabs it from the published version, so the images are working now
The favicon seems to also be working on the localhost, but I'll see later if that breaks with vercel
The last problem with file download is still remaining, though
And I can't see how this may be linked to optimisation as the link is built using js
whats the problem?
The downloaded file is 0 bytes from the localhost download
I see a js error there, if its a custom js you wrote, then its on you
It works perfectly on the webstudio hosted one
I don't think webstudio has anything to do with it
its your custom code
Alright I'll try look into that but thanks for all the help!
Images and download working now!
The favicon is odd because It is working on the webstudio host, and on the localhost, but does not show up when hosted on vercel
Could this be a caching thing I just need to wait for?
Its the same 400 error code
Actually this is probably vercel's problem
check the path and network tab if its loading at all
But I'm not sure how to andle any image optimisation stuff for this since I just plopped the image in webstudio
I don't really have a choice
Add a reply
Sign up and join the conversation on Discord