Infer image size from files in /public directory?

[wary terrace]

Is there a method like inferRemoteSize() for images in the /public directory?

The docs say no, but here's the thing.

1. My CMS (Tina CMS) allows me to define only one assets folder and /pubic is most useful for that, as the assets (including files that are not images) are supposed to be copied 1:1 to the build.
2. Everything so far works great, but this way we need to manually enter image dimensions to avoid cumulative layout shift (CLS). This is prone to error.
3. inferRemoteSize() works with remote images, so I figured maybe there's a way to let it access the /public directory?

[lost marsh]

@wary terrace Have you found an answer?

[low basin]

You should be able to use the inferSize prop of the image component!
Specify the path like this:
< Image src="/path/in/public.png" alt="..." inferSize />

[lost marsh]

@low basin I wish I could.
I'm not using the image component, it's for measuring OG image dimentions.

[low basin]

Can you show me how you're using the function then? Seeing the code might help

[lost marsh]

I'm doing await inferRemoteSize(url), which works fine with remote URLs and internal URLs that point to the actual server (localhost:4321 by default).

The problem is, I don't want to hardcode the port, but AFAIK there's no way to know the port.

[low basin]

There is if you set it in your config:

import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    port: 8080,
    host: true
  }
});

[lost marsh]

I know it's doable by hardcoding, but I actively want to avoid hardcoding the port number.

But I guess I'm left with no choice.

[low basin]

You might be able to do this via the experimental Astro:env as well, since that runs in a function you could pass in a function there that tries to generate a port

But that's a little hacky so idk if you wanna use that

[lost marsh]

Are there any docs for that? Tried writing a Vite plugin but failed because it's invoked after the point where it's needed.

Referring to #1305494175080382506 message

[low basin]

https://docs.astro.build/en/reference/configuration-reference/#experimentalenv

In the examples you can see a default for the port being set, if you run a function instead of hard coding that might work

[lost marsh]

Nope, Cannot find module 'astro:env/server'. I guess this creates a circular dependency for the server to run. Even if it could, it disables the automatic port allocation. Thanks, though!

[low basin]

Just to confirm, you did enable it in your config right? Remember, this is experimental

[lost marsh]

experimental.env is an object, providing a schema is effectively enabling it.

[low basin]

Oh yeah, I forgot about that LMAO
so used to having to enable stuff first

[lost marsh]

From the other post:
Even hardcoding an IP doesn't seem to work! It works properly while a dev server is running, but with npm run build, fetch fails. This is officially a dead end. Any tips?

[lost marsh]

Update: Had to let go of insisting on using an Astro-specific API for this task and opted for third-party solutions to finally make this possible. If anyone is seeing this in the future, you should do the same.

[low basin]

What did you end up using? Curious

[lost marsh]

https://www.npmjs.com/package/image-size

Dropped the use of inferRemoteSize(url) and used image-size for both local and remote images.

[wary terrace]

Thanks for sharing that—I still haven't found an Astro-native way to get image sizes from /public.