Images in modules are not showing up when viewing page in web browser

💬 App Building
1

I created a header module that I have added to the pages in the multi-page app. The problem is that the image I added to the module is not showing up when I view the app in my web browser. Does anyone know what would cause this?

1 Like
3

Hello @tomm ,

There could be several reasons why the image in your Retool header module is not displaying in your multi-page app. Here are some common causes and troubleshooting steps:

1. Image URL Issue

  • Problem: The image URL might be incorrect or inaccessible.
  • Solution:
    • Check the image URL to ensure it is correct and points to a valid image.
    • Test the URL directly in your web browser to verify that it loads.

2. Permissions Issue

  • Problem: The image URL might be restricted due to permissions or require authentication.
  • Solution:
    • If the image is hosted on a restricted server (e.g., AWS S3 bucket, Retool Storage), ensure it has the proper public-read permissions.
    • If it requires a token or authentication, you’ll need to use an authenticated URL or proxy the request through a Retool query.

Steps to Debug:

  1. Open your browser’s developer tools (F12) and check the Console and Network tabs for errors related to the image.
  2. Verify the image URL by pasting it directly into your browser’s address bar.
  3. Test the module with a placeholder image (e.g., a public image URL) to see if the problem is specific to your image.
4 Likes
4

Hi @tomm,

Checking in here! Did you already sort this out? Were there any console errors?