I am working on a custom Shopify section that displays text alongside images. I have used the image_picker settings in the schema to allow users to upload images via the theme customizer. The images are rendered in the HTML console but are not displayed on the page.

Here is the code:

<section class="custom-section">
  <div class="container-wrapper">
    <div class="text-section">
      <div class="title-container">
        <h2>{{ section.settings.heading }}</h2>
      </div>
      <div class="text-container">
        <p>{{ section.settings.content }}</p>
      </div>
      <div class="spacer"></div>
      <h1 class="circular">
        <span class="char1">W</span>
        <!-- ... additional chars ... -->
        <span class="char39">.</span>
      </h1>
    </div>
    <div class="images-wrapper">
      {% if section.settings.image1 %}
        <img src="{{ section.settings.image1 | image_url: 'master' }}" alt="Image 1">
      {% endif %}
      {% if section.settings.image2 %}
        <img src="{{ section.settings.image2 | image_url: 'master' }}" alt="Image 2">
      {% endif %}
      {% if section.settings.image3 %}
        <img src="{{ section.settings.image3 | image_url: 'master' }}" alt="Image 3">
      {% endif %}
    </div>
  </div>
  <div class="blue-background"></div>
</section>

Schema:

{
  "name": "Custom Section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our jewelry"
    },
    {
      "type": "text",
      "id": "content",
      "label": "Content",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor tincidunt posuere. Nam tempus, leo ac tempus hendrerit."
    },
    {
      "type": "text",
      "id": "circular_content",
      "label": "Circular Content",
      "default": "We’re the bestie that you can be yourself with."
    },
    {
      "type": "image_picker",
      "id": "image1",
      "label": "Image 1"
    },
    {
      "type": "image_picker",
      "id": "image2",
      "label": "Image 2"
    },
    {
      "type": "image_picker",
      "id": "image3",
      "label": "Image 3"
    }
  ],
  "presets": [
    {
      "name": "Sample Section"
    }
  ]
}

Troubleshooting Steps Taken:

• I checked the URLs in the console, but I am not sure if they are correct (How to check if the paths are correct?)

Here you can see:

• Checked the CSS for any properties that might hide the images (e.g., display: none, visibility: hidden, z-index issues).

Despite these checks, the images still do not display on the page.

Questions:

• What could be the reason that images are not displaying despite being correctly referenced in the HTML?
• Are there any additional checks or steps I should take to troubleshoot and fix this issue?

Any help would be greatly appreciated!