Gozie Gozie -3 years ago 113
Python Question

Error loading Product Image

I have created a product_view page of an e-commerce project and I am trying to access some items on a page with its details. When the page loads, I only the name of the image of the item and not the image itself. Here is a screenshot : enter image description here

Here is my settings.py

"""
Django settings for shoppingmall project.

Generated by 'django-admin startproject' using Django 1.11.1.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


TEMPLATE_DIR = os.path.join(BASE_DIR,'templates')

STATIC_DIR = os.path.join(BASE_DIR,'static')

MEDIA_DIR = os.path.join(BASE_DIR,'media/')

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'jn^sgbwcco=!w9=h11_m2cvb727#k2w&$jb6w^68xldcr3l$jl'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []

CART_SESSION_ID = 'cart'

# Application definition

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.sites',
'registration',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'shop',
'cart',
]



MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'shoppingmall.urls'

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR, ],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

WSGI_APPLICATION = 'shoppingmall.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATICFILES_DIRS = [STATIC_DIR, ]

STATIC_URL = '/static/'

# Media files where django stores media uploaded by users

MEDIA_ROOT = MEDIA_DIR

MEDIA_URL = '/media/'

# DJANGO REGISTRATION REDUX
ACCOUNT_ACTIVATION_DAYS = 7 #Number of days the activation email remains active, afterwards account remains inactive permanently
REGISTRATION_AUTO_LOGIN = True #Account is automatially logged in upon registration

#DJANGO REGISTRATION REDUX
SITE_ID = 1


And here is my urls.py for my project where the media_url is

"""shoppingmall URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.conf.urls import url, include
2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include('shop.urls', namespace='shop')),
url(r'^cart/', include('cart.urls', namespace='cart')),
url(r'^accounts/', include('registration.backends.default.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)


Here is the template for the product_view

{% extends 'shop/base.html' %}
{% load static %}

{% block title_block %}
Product View
{% endblock %}

{% block body_block %}
{% for p in product %}
{{ p.image }}
<br>
Product - {{ p.name }}
<br>
<!-- {{ p.brand }} -->
Availability - {{ p.availability }}
<br>
<p class="price">Price - ${{ p.price }}</p>
<form action="{% url 'cart:cart_add' product_id=p.id %}" method="post">
{{ cart_product_form }}
{% csrf_token %}
<input type="submit" value="Add to cart" class="button light">
</form>
{% endfor %}
{% endblock %}

Answer Source

Without having looked through your settings.py or urls.py... could it be that the error is in your template.html.

To display an image, you need to use an <img> tag, looking something like this:

<img src="{{ item.image }}">

Even if the path is not correct, that should never be displayed on your page as it is an argument inside the img tag. It seems you forgot to place it inside this tag...

edit: now that you updated your question with the template code, it does indeed seem to be the case.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download