with-electron-typescript show example of image path mapped correctly

Bug report

Describe the bug

The electron example is showing how Next.js can be used with Electron to create Desktop Apps https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript

When running the default example it runs fine, but after adding an image behaviour is not consistent. The guide gives and example to load an image: <img src="/my-image.png" alt="my image" /> https://nextjs.org/docs/basic-features/static-file-serving

The image loads fine when using the dev server npm start but not when running npm run dist.

If you add debug toolbar to the electron-src/index.ts mainWindow.webContents.openDevTools()

You can see that urls in css are processed correctly, but not urls in html.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone the example at: https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript
2. Place an image in the directory at: /renderer/public/my-image.png
3. Add the image to: /renderer/pages/index.tsx <img src="/my-image.png" alt="my image" />
4. View it working using: npm start
5. View the error using npm run dist

Expected behavior

Image paths should be mapped correctly whether running in dev mode or production.

Screenshots

npm start

npm run dist

System information

• OS: macOS Catalina 10.15.6
• Browser: Chrome 85.0.4183.102
• Version of Next.js: 9.5.1
• Version of Node.js: 14.4.0

How to fix

Move image under a static folder at: /renderer/public/static/my-image.png and update url to be: <img src="/static/my-image.png" alt="my image" />

This doesn’t seem to be documented, but works!

[Ciberusps]

Thanks a lot saved much time

[danbrown]

Bruh, I was using a subfolder inside public/images to serve images and realize was not showing in electron, solution was change all image paths to public/static/images/image-name.png. The folder name HAS to be static, not just be a subfolder of public directory. Thanks!