Third-party icons do not load correctly on deployment

[hydroperx]

Summary

I've used lots of declarations in a third-party library, like:

import flower from "../icons/flower.webp";

And then used it in <img> and some cascading url().

It works perfectly on the Next.js development server; but when deploying it on Vercel the icons don't show up, even though they appear in the Vercel deployment log.

Additional information

• Library using import for icons: https://github.com/hydroperx/metro.js
  • https://github.com/hydroperx/metro.js/blob/master/src/components/Icons.tsx

Example

No response

[hydroperx]

Haven't figured out yet.

[hydroperx]

I'm/was using Turbopack. I'm planning to just do import _loc_0 from "./flower.webp"; typeof _loc_0 == "object" ? _loc_0.src : _loc_0, so it should work in both cases. I didn't test it yet because I'm building another library :/

[icyJoseph]

I am not following 100% here, is this happening for all images or only SVGs?

[hydroperx]

I've only tested it with SVGs.

[hydroperx]

@icyJoseph Confirmed: it works using the typeof trick to conditionally use the src property.

[adityasurya4103]

import flower from "../icons/flower.webp";

work in dev (Next.js handles them dynamically), but in production (e.g., on Vercel), images must be served from the /public folder to work reliably — especially if you're using them in <img> tags or CSS url().

Fix:

1. Move your flower.webp file to public/icons/flower.webp.
2. Then update your usage to:

< img src="/icons/flower.webp" alt="Flower" / >

Or in CSS:

background-image: url('/icons/flower.webp');

Avoid using import for images in CSS — it breaks in production.