Add webpack loader for images

[jtbandes]

Our default webpack config is lacking loaders for images. If someone wants to import and use an image file, they get errors like this: https://github.com/foxglove/studio/discussions/3264#discussioncomment-2648824

[rgov]

The simplest way to do this right now is

1. Enable inline Asset Modules. Webpack will copy the entire contents of the file as a base64-encoded data: URL:

   config.module.rules.push({
       test: /\.(png|svg|jpg|jpeg|gif)$/i,
       type: "asset/inline",
   });
   

2. Add TypeScript declarations that explain that the type of an imported PNG or whatever is a string constant.

   declare module "*.png" {
       const content: string;
       export default content;
   }

That said, I have a proposed change to Studio itself that would support asset/resource instead, where the resource is instead copied into the extension's dist/ directory, and Webpack inserts the URL of the resource.

[bnbhat]

I am trying to load a PNG file in my custom extension. Is there any fix for this issue?

edit: above mentioned answer by @rgov solved the issue for me.

[defunctzombie]

This example also shows how to do this: https://github.com/foxglove/create-foxglove-extension/blob/main/examples/extension-demo/config.ts