The following code is for my header. I am trying to load images from a section setting starting a theme from scractch. However, when loading the images i get a 404 error on the developer log of the browser, have tried various methods of loading images such as in the product page {{product.featured_image}}, none work. I think it has to do something with it being a development store? Any ideas?
<header>
<h1>header start</h1>
<nav></nav>
<ul>
{% for link in linklists.main-menu.links -%}
<li>{{ link.title | link_to: link.url }}</li>
{%- endfor %}
</ul>
{% if section.settings.logo_desktop != blank %}
{% assign desired_height_desktop = section.settings.logo_desktop.height | times: section.settings.desktop_width | divided_by: section.settings.logo_desktop.width %}
<img src="{{ section.settings.logo_desktop.src | image_url: section.settings.desktop_width }}" alt="Site Logo" loading="eager" width="{{ section.settings.desktop_width }}" height="{{ desired_height_desktop }}" class="site-logo desktop-{{ section.settings.desktop_logo_placement }}">
{% endif %}
{% if section.settings.logo_mobile != blank %}
{% assign desired_height_mobile = section.settings.logo_mobile.height | times: section.settings.mobile_width | divided_by: section.settings.logo_mobile.width %}
<img src="{{ section.settings.logo_mobile.src | image_url: section.settings.mobile_width }}" alt="Site Logo" loading="eager" width="{{ section.settings.mobile_width }}" height="{{ desired_height_mobile }}" class="site-logo mobile-{{ section.settings.mobile_logo_placement }}">
{% else %}
{% assign desired_height_mobile = section.settings.logo_desktop.height | times: section.settings.mobile_width | divided_by: section.settings.logo_desktop.width %}
<img src="{{ section.settings.logo_desktop.src | image_url: section.settings.mobile_width }}" alt="Site Logo" loading="eager" width="{{ section.settings.mobile_width }}" height="{{ desired_height_mobile }}" class="site-logo mobile-{{ section.settings.mobile_logo_placement }}">
{% endif %}
<h1>header end</h1>
</header>
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo_desktop",
"label": "Desktop Logo"
},
{
"type": "text",
"id": "desktop_width",
"label": "Desktop Logo Width (in px)",
"default": "200"
},
{
"type": "radio",
"id": "desktop_logo_placement",
"label": "Logo Placement on Desktop",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "left"
},
{
"type": "image_picker",
"id": "logo_mobile",
"label": "Mobile Logo"
},
{
"type": "text",
"id": "mobile_width",
"label": "Mobile Logo Width (in px)",
"default": "150"
},
{
"type": "radio",
"id": "mobile_logo_placement",
"label": "Logo Placement on Mobile",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
}
]
}
{% endschema %}
