Can't get image to show: Compile error, image not showing in React app. Shopify CLI

Technical Q&A

Topic summary

Problem: Locally stored images in a React app scaffolded with Shopify CLI are not displaying; only alt text renders. Using import or require initially triggered a compile error referencing Webpack.

Recent change: The developer added a file-loader rule via an extra .push in next.config.js (Next.js configuration), which removed the compile error. However, images still fail to render in the UI.

Context/terms:

  • React: JavaScript library for building UIs.
  • Webpack: Module bundler that processes assets like images.
  • Shopify CLI: Tool to generate Shopify app projects (often with Next.js).
  • next.config.js: Next.js config file where custom Webpack rules can be added.

Evidence: Screenshots show the Webpack error, the updated next.config.js with file-loader, and the UI displaying alt text instead of the image. Images/code snippets are central to understanding the issue.

Open questions: Whether additional configuration is required in this Shopify CLI/Next.js setup to handle local image assets, and if the chosen loader/config is appropriate for Next.js.

Status: Unresolved. No confirmed solution or action items beyond the loader change that removed the compile error but didn’t fix image rendering.

Summarized with AI on March 1. AI used: gpt-5.
1

I can’t seem to render any image to my react app that is stored locally. Whether it’s using import or require, I was getting this compile error where it tells me to reference Webpack. I created the app using the Shopify CLI so I did my best of writing to the correct file. I added an additional .push with ‘file-loader’ as shown below in the next.config.js.

AnswerBook_3-1633157581686.png
AnswerBook_3-1633157581686.png625×561 21.5 KB

This got rid of the compile error:

AnswerBook_0-1633154291072.png
AnswerBook_0-1633154291072.png974×286 9.52 KB

I’ve tried both import and require for the image rendering but I still get the Alt text instead of the image.

AnswerBook_1-1633154334856.png
AnswerBook_1-1633154334856.png524×230 5.88 KB

I feel like the CLI setup should already be configured to compile images as it is. Am I missing something? Any help would be greatly appreciated.

1 Like