How to render images from the web dynamically in a template

Using Django
1

My model has a field that stores the link to an image on the web, I’m rendering it inside a bootstrap card component like so

src="{{ product.image_url }}"

However the image is not displayed, how can this be done? Thanks

2

I’ll assume that that src attribute is in an img tag.

Have you verify that the src tag is the right url for that image? (Can you put that url directly in the address bar and have the image display?)

Are you altering this tag dynamically in the client using JavaScript, or is it being rendered on the server?

3

Hi Ken,
Yes src attribute is an image img tag , and I have verified the link from the address bar. This image is coming from the server

4

Is that img tag with that src attribute being rendered on the server (so that <img src="...."> is being sent by the server as part of the HttpResponse, or are you modifying that src attribute on the client using JavaScript?

5

Here is the code

            <div class="col-sm-6">
                <div class="card">
                    <img class="card-img-top" src="{{ product.image_url }}" alt="Orange">
                    <div class="card-body">
                        <h5 class="card-title">{{product.name}}</h5>
                        <p class="card-text">{{ product.price }}</p>
                        <a class="btn btn-primary" href="#">Add to Cart</a>
                    </div>
                </div>
            </div>
            {% endfor %}```
6

If you enclose your code between lines of three backtick - ` characters, that’ll keep the forum software from mangling it. This means you’d have a line of ```, then your code, then another line of ```. (Those lines of ``` must be by themselves and not part of the line with the code.) You can edit your previous response and insert that before & after the code.

7

Thanks, I have updated the code snippet.

8

Ok, in your browser’s developer tools, on the network tab, you’ll either see a request for that url and the http return code with an error that it’s getting, or you won’t see a request for it at all.

But there’s still a basic issue I’m trying to understand. Is any of this being modified dynamically via JavaScript, or is this all being generated and rendered on the server as part of a full page?

9

I dont reallyget you so well but what happens is the view function returns a dictionary of products, and markup-index file also the name and price fields are displayed correctly

10

Is there any JavaScript being used to modify this page, or is this page only being handled by the view?

11

Oh! ok, no its not modified by javascript

12

Ok, so open your browser’s developer tools, network tab, and refresh the page. Look for the reference to that image in the requests being made.

13

Done that…status is 200 and type is text, is that the problem?

Screenshot from 2021-07-11 17-14-19
Screenshot from 2021-07-11 17-14-191920×1080 217 KB

14

I see a …Cross-Origin Read Blocking (CORB) blocked cross-origin response…warning let me investigate further and see