Display Image in Django

Hello guys, welcome to learn vern.

In the Last topic we saw image uploading using django where we picked an image and uploaded it to a server that is on a database.

Now what we have to do today is, the image that we saved in the database. We need to fetch that image and display that on our browser right? Clear?

So first of all let’s understand about image fetching.

Image fetching, so i told you the following settings in the last video as well right?

But today also, I am repeating in this video, why?

Because only with the help of this particular part you will be able to fetch the image.

you cannot fetch your image from the database Without this part, okay?

Both of these things, media root and media URL needs to be included in settings dot py right?

Media root means that particular path to where the image is stored in the PC.

And media URL means the part from which you will fetch that particular image through URL.

And show on browser okay?

What is the second setting you have to do here is, this particular configuration part of settings, this configuration part needs to be added in urls dot py in projects.

Why? Because media root and media URL that we included in settings dot py needs to be called at the time of debug okay?

And how will this call happen? With the help of these settings right? Clear?

You need to remember these both things at most.

Right? You don't need to particularly mug up these settings, you will get these on the internet as well, okay? Right?

So let's move ahead to the practical part, how is it done? Let's see.

So guys this is a previous project only.

Where we uploaded an image, here is our image which is already available on our database right?

First of all we need to fetch and show on the showpage.

So what we will do is, you don't need to do much, firstly some changes are to be made in settings.

First of all we will go to settings dot Py right? Where? In settings dot py.

And when you will go to the end of it, here you can see this static url and other things.

But we don't want static urls, why don't we want it?

When we uploaded the image, at that time here in models we had given path for “upload to image”

See here it is made where our image is already stored right?

Now what we have to do is fetch this particular image.

What do you have to do for fetching?

You have to go into settings dot py.

And this particular setting which I am keeping here has to be pasted here.

What you have to do is, only paste.

You don't have to do much right? Clear?

Now as you will paste it, this OS error arising, simply import OS here.

Import OS right? Clear?

After doing this, you need to include these settings in settings dot py.

Or else your image will not come right?

And to call these settings, what you have to do is go to the urls dot py of the project.

And in this urls dot py of project, this particular thing that i am pasting here has to be pasted here in this way.

Now this yellow color underlining is coming below, this is coming because we have to not import above so let’s import this thing also so that this error goes away .

Now why have we written this?

Because with its help only, your image will come after fetching.

Which means media URL and media root that we have kept in settings dot py, these both things will be called at the time of debugging .

And this will get called at the time of debug, then only our image will get fetched right? Clear?

Now first of all what we have to do is..

Go in views dot py.

Create a new view here which is def .

Here i will tag, comment,

Image fetching view okay?

Image fetch, created a view , where i passed a request.

And now what we have to do here is take variable, all img

Then the name of our table dot objects dot all.

Why did we use this “all method”?

Because we need to fetch the data from the database right?

I Needed to fetch All the images in the database . That's why I did it all.

And where do we have to pass this?

On show dot html.

And Where we have to pass it ? on show dot html.

How will it pass here?

Here we will pass a dictionary, suppose here I take key 1.

And in that key one, pass the variable, all img.

Right? Now what will happen ?

Whatever data comes here, will get fetched and will be taken to this show dot html.

But how to call this view? That is also the main thing.

Until this view does not get called, our image will not be fetched.

So what we have to do is, i told you in crud operation, as it gets inserted, our call page should automatically get called.

So what we have to do is, first of all, redirect imports.

Here write return redirect and this new view that we created,

Firstly we have to create its url.

 So here the path shows an image, taken a path.

Views dot image fetch, taken this as a name for view and wrote here “show”

Right? Now copy this “show” which is used as a name, where do you have to keep it?

In views.py, pass in the parameter of redirect.

What will this do?

As this will submit the view to your image, directly this view will be called on the show page.

Now we sent our data on show dot html through key one.

So over there this has to be fetched also, obviously it won’t come directly.

So what we will do is firstly put a particular condition here that if key one,

If data comes in key one.

See this also i have told you, when i did your crud operation.

Guys if you don't know crud operation , then django crud, i have uploaded videos previously,

So check that once, have a look and understand it and then continue this video.

If you don’t know crud operations, then you won’t be able to work in django okay?

Here will be multiple images so lets run for loop also.

So ‘i’ is the key one.

So we turned on for loop, so let's close it also.

So end “for”.

Now what we need is, name of image and image.

So what we will do is take one as an image name and how to make this print? I dot image name. right?

And what do we need more? Its image right?

Name of a particular image that will come should have that particular image displayed below it.

So what we will do here for the image is, first of all remember, you need to fetch the image so the media underscore the URL, you need to write this first, and then the url of the image is saved. See

In the database, the url of the image.

Which means the path is saved, not the image.

your image will never get saved in the database.

So this is URL

How will you fetch this?

I dot image, which means name of your field dot URL.

You will write this right?

Only when you will write this, your image will get displayed, or else it won't come.

Writing this is mandatory.

Why? Because through the URL of media, the two settings that we included in settings dot py, for that this media URL is written right?

Now what we have to do is let's insert okay?

Lets run this again, one new run server, and lets upload one more new image.

Image 2, let's upload image 2 here.

See it is uploaded but how is this getting displayed?

In this way, why in this way?

Because when we want to show the image, see i have made a mistake here right?

Why have I done that?

Because I wanted to show you this thing, so this particular is only bringing the path.

But we want to show the image.

To show the image, in show dot html, first cut this particular path.

First you will take the image tag here and pass this in its source.

Okay? Because in the source only, your image comes.

As you fetch it, see your image has come right?

Now we will do one thing, let's upload a new image here.

Which is, lets take image 3, here choose file, image 3.

And upload.

So here is the third image as well.

So in this way you can fetch the particular image using django okay?

If someone doesn't know how this worked?

Then watch the previous video to know how the uploading was done.

Watch this video only when you want to fetch okay? Right?

So you understood how to fetch images on the browser.

Okay guys? When we will meet next, i will teach you validation on html firm through javascript 

Okay? And if you have any doubt…

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.