fresh Images not shown as expected after build Fresh project

Hi there,

I'm using Fresh 2.1.1 and i have the assets and static folders. When working on dev mode (deno task dev) the website work as expected rendering both images on HTML <img> tag and on bg-[url(image/about/image-1.webp) CSS attribute, but after building the project using deno task build, the code expect that the file bg-[url(image/about/image-1.webp) is placed on assets folder, not on static.

I have ran the following steps:

deno run -Ar jsr:@fresh/init (set yes to tailwindcss and vscode).
created image folder into static folder and pasted both images.
modified index.ts into this:

import { Head } from "fresh/runtime";
import { define } from "../utils.ts";

export default define.page(function Home(ctx) {
  console.log("Shared value " + ctx.state.shared);

  return (
    <div class="px-4 py-8 mx-auto fresh-gradient min-h-screen">
      <Head>
        <title>Fresh counter</title>
      </Head>
      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
        <img
          class="my-6"
          src="image/image-2.png"
        />
        <div class="bg-[url('image/image-1.png')] bg-[length:200dvw] bg-right bg-no-repeat md:w-1/2 md:bg-[length:65dvw]">
          <div class="px-4 py-20 md:py-72">
            <h1 class="text-4xl">
              TEST
            </h1>
          </div>
        </div>
      </div>
    </div>
  );
});

deno task build and noticed the following message on terminal: image/image-1.png referenced in image/image-1.png didn't resolve at build time, it will remain unchanged to be resolved at runtime.
deno task start and noticed the wrong refference on network tab.

Thank you for your attention.

Sep 23 '25 22:09 eduardorangell

Relative asset paths are always a bit iffy because they're resolved relative to the URL the user is visiting in the browser. During building all assets are put into a common asset folder which breaks this notion.

The way to fix it is to use root relative urls:

  <img
    class="my-6"
-   src="image/image-2.png"
+   src="/image/image-2.png"
  />

Sep 24 '25 08:09 marvinhagemeister

Thank you @marvinhagemeister, It's comical how a simple trailing slash have taken a few hours out of my day.

Sep 24 '25 13:09 eduardorangell

Fair point we should add a section about that in our docs. We should probably turn this into a lint rule too.

Sep 24 '25 14:09 marvinhagemeister

We should probably turn this into a lint rule too.

Time to finish/land #3179 ?

Sep 24 '25 14:09 fry69

Before this issue, i have got another one regarding with local fonts and i fixed by using online @import url("https://...") instead of refferecing fonts located on static or assets folder.

If you set like this, the project will try to find on assets folder:

@import url("fonts/Eight-One/stylesheet.css") layer(base);
@import url("fonts/Myriad-Pro/stylesheet.css") layer(base);

And if you set like this example, the project will try to find on static folder:

@import url("/fonts/Eight-One/stylesheet.css") layer(base);
@import url("/fonts/Myriad-Pro/stylesheet.css") layer(base);

But none of those will in fact load the local fonts on browser, instead i will get a 404 error. Maybe there is something related with my first description.

Sep 24 '25 14:09 eduardorangell

I think it would be easier if you posted your repo (or a minimal reproduction) it would be easier. The thing about fonts is that the stylesheet has to in turn reference the actual font files, also by url, so there are multiple places where it could be wrong.

Sep 26 '25 22:09 CAYdenberg

Sorry my delay @CAYdenberg, i've uploaded a minimal reproduction repo so it can be easy to test it: fresh-test repo

Oct 01 '25 17:10 eduardorangell

@eduardorangell I played around a bit. Deleted your direct imports of the font stylesheets, and put this block in your main assets/styles.css:

@layer base {
  @font-face {
    font-family: "Eight One";
    src: url("/fonts/Eight-One/98bc871859421aac64683fbbb7e9f181.eot");
    src: url("/fonts/Eight-One/98bc871859421aac64683fbbb7e9f181.eot?#iefix")
        format("embedded-opentype"),
      url("/fonts/Eight-One/98bc871859421aac64683fbbb7e9f181.woff")
        format("woff"),
      url("/fonts/Eight-One/98bc871859421aac64683fbbb7e9f181.woff2")
        format("woff2"),
      url("/fonts/Eight-One/98bc871859421aac64683fbbb7e9f181.ttf")
        format("truetype"),
      url("/fonts/Eight-One/98bc871859421aac64683fbbb7e9f181.svg#Eight One")
        format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
}

This seems to work in both prebuilt and dev mode (you need another block for the other font). I think the key is that the fonts themselves have to be handled as static files, whereas the CSS font-face declarations need to be built by Vite.

@fry69 @marvinhagemeister This might be considered a bug, since prior to my change it worked in prebuilt but not dev mode. Certainly there could be something added to the docs that clarifies the differences be assets and static.

Issue should be re-titled: I think images work as they should.

Oct 05 '25 03:10 CAYdenberg