Should images be bundled into the "public/build" directory.?

[manic raft]

In the remix.config.js file, the assetsBuildDirectory uses "public/build" as the default. After I run npm run build, I would have expected to see my images in that output as well, but I'm not. For context, I'm storing all images in "public/assets".

[astral palm]

I believe it depends on whether you're importing the image

import image from "./image.jpg";
...
<img src={image} />

or just linking it as src
<img src="/assets/image.jpg" />

First option should get fingerprinted and auto bundled into your build, second won't and would just be served directly out of your public folder.

(I might have syntax on first option wrong, since I don't use it very often)

[manic raft]

@astral palm Thanks, that clarifies most of it. I just tested the first option and it does include the image in the build folder. Is there a recommended method? I wasn't expecting those two methods to behave differently like that.

For anyone else, here is the syntax for the first option:
import logo from 'public/assets/logos/logo.svg'

[gritty dragon]

they're both valid, if you import them then they get fingerprinted by Remix which can help you bust the cache later if you want to change them

You can tell browsers to cache them forever because that image URL will never be different

whereas if you just have them in the public dir you'll need to rename them manually or be ok with users still getting the previous version until their cache expires

[gritty dragon]

I would not recommend importing like this from the public folder though, you'll get two copies

the original in /public and a hashed one in /public/build

generally you'd do the import from somewhere else in your codebase

[zinc granite]

I prefer to import images whenever I can, this way I get a hashed file name that I could cache forever (not really forever but almost)

[acoustic knoll]

Agreed on not importing from public folder, if you want the first method then use images located outside of public.

[zinc granite]

and when I import an image I place the image either in an app/assets folder or using v2 route file convention I put the image in the route folder like app/some.route._index/image.png

I fallback to using the public folder when the image for some reason needs to have a specific name, examples are favicon.ico that some browsers fetch regardless of the <link> tag indicating another path

or some apple images that also iOS request always from the same path

[acoustic knoll]

Same here, usually “app/assets” but can vary, just not public if importing.

[zinc granite]

yes, definitely not in public if I'm importing them

[acoustic knoll]

By the way, did anything change with preloadAssets in remix-utils? I’m seeing that crash my vercel deployments under remix 1.18.1 so had to remove the call

[zinc granite]

that function depends on window._remixManifest which is undocumented so they probably changed it

[acoustic knoll]

Yeah was a handy function but just thought I’d give a heads up that 1.18.1 seems to have broken it (also apologies for changing topic)

[zinc granite]

but since remix utils still supports old version of Remix I haven't checked, I plan to do a major release of remix utils once v2 is out, and there I can update other things that are also depending on internals that changed

[astral palm]

v1. 19 just came out this morning. Is it still an issue?

[drifting hound]

I'm running into a similar issue trying to load an image as a background-image using SCSS… currently the image is in "app/images" but once built, it isn't referencing the image from the build folder. Any ideas?

[zinc granite]

if they changed some internal like the remix manifest shape, it's unlikely they reverted it in v1.19

[zinc granite]

you need to put the image in public folder

[drifting hound]

as in "public/images" or "public/build/images"?

[zinc granite]

public/images, the public/build is for Remix to place your hashed files, since you're referencing the image in a SCSS file Remix is not moving a copy to public/build

[drifting hound]

I just tried putting it in public/images still no result unfortunately.

[acoustic knoll]

Haven’t updated my stuff yet so not sure. Been busy on some content and client projects today mostly

[manic raft]

thank you, very helpful. I found that reference to the image being fingerprinted on the Remix docs as well. I also looked at Kent Dodd's website on GitHub and it appears he's using imports as well; although, it's a different set up because he's running cloudinary.

[acoustic knoll]

yeah it's still an issue in 1.19

[drifting hound]

http://localhost:8788/public/images/grid.png still resolves as a 404

[gritty dragon]

remove /public

the public directory is the one that's served

http://localhost:8788/images/grid.png