[FIXED] how to show external media in template in django

Issue

Hi i'm currently new to Django and i'm trying to populate a product page.

I'm having problem with the img to show the image(which uses an image url online instead of a file) for example an img src="media3.scdn.vn/img2/2018/6_2/ZIBLXA_simg_b5529c_250x250_maxb.jpg"

The url already in my database with the text media3.scdn.vn/img2/2018/6_2/ZIBLXA_simg_b5529c_250x250_maxb.jpg

But when i tried to render it in template the image doesn't show I tried to used the but it still not work Any help would be appreciate!

My template

{% for discount in discounts|slice:":8" %}
    <div class="col-md-3 product-men women_two">
        <div class="product-googles-info googles">
            <div class="men-pro-item">
                <div class="men-thumb-item">
                    <img src="{{STATIC_URL}}{{discount.product_image}}" alt="" />
                    <div class="men-cart-pro">
                        <div class="inner-men-cart-pro">
                            <a href="single .html" class="link-product-add-cart">Quick View</a>
                        </div>
                    </div>
                    <span class="product-new-top">New</span>
                </div>
                <div class="item-info-product">
                    <div class="info-product-price">
                        <div class="grid_meta">
                            <div class="product_price">
                                <h4>
                                    <a href="single.html">{{discount.product_name}}</a>
                                </h4>
                                <div class="grid-price mt-2">
                                    <span class="money">{{discount.product_old_price}}</span>
                                </div>
                            </div>
                            <div>
                                <h3>{{discount.product_sit}}</h3>
                            </div>
                            <div><h2 style="color: red;">Only {{discount.product_price}}!</h2></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

EDIT

Seems like the image src trying to get is "http://127.0.0.1:8000/media3.scdn.vn/img2/2018/6_2/ZIBLXA_simg_b5529c_250x250_maxb.jpg" which i don't want "http://127.0.0.1:8000/" in the link. Is there a way to remove this when using {{discount.product_image}} tag ?

Main project urls.py:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]

frontend app urls.py:

from  django.urls import path
from .import views
from django.conf import settings
from django.conf.urls.static import static
app_name = 'frontend'
urlpatterns = [
    #index
    path('',views.index, name='index')
]

Solution

Try using .url like this.

<img src="{{ discount.product_image.url }}"  alt=""/>

Also add the MEDIA and STATIC url to your project url patterns.

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URL pattern goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

EDIT:

From the discussion in chat, I understood that I had misunderstood your problem first. The images are external and not in your db, you are just storing the URL to the images. And you are using a TextField not ImageField. I assumed ImageField previously. So, all you have to do is to replace {{STATIC_URL}} from in front of the actual URL and put http:// there. The reason behind this is, as the src is missing http:// it's assumed the image to be in the same host domain. So it goes to http://127.0.0.1/your_url.

<img src="http://{{ discount.product_image }}"  alt=""/>

Answered By - MD. Khairul Basar

Answer Checked By - Senaida (PHPFixing Volunteer)