I'm trying to pull the link from the database in the src part, but I couldn't.
im using django. images are in s3 storage. i append link to sqlite database in django. normally, {{project.ac}} is working. but <img src=> is not working.
JİNJA TEMPLATE
CODE
<figure class="glitch-filter-example">
<figcaption class="glitch-filter-example__heading">{{ project.ac }}</figcaption><br/><br/>
<img src={{ project.image }}>
<img src={{ project.image2 }}>
<p class="glitch-filter-example__filtered-text">HTML text</p>
</figure>
<script src="{% static 'icerik/js/script.js' %}"></script>
PAGE SOURCE
<figcaption class="glitch-filter-example__heading">MY TEXT</figcaption><br/><br/>
<img src=>
<img src=>
Related
I've just started learning django and have a problem loading images using loops.
In models.py I created a class called Pictures
In views.py I created 3 instance of the class(Pictures) where img attribute is set to 3 different image names stored in the static folder.
Now, I got stuck in loading the images in the template using for loop. apart from img attribute, I also created other attributes. These are the name and image description both of type string and they load just fine when rendered in the template using for loop.
My question is what should I put in inside the img html tag to load these 3 different images using for loop?
Initially, I was using the syntax below to load images directly from the static folder.
<img src="{% static 'img/image-name.jpg' %}" alt="" width="250" height="250">
Now, I want to load the names from the img attribute and for each iteration, I want each of the three different images to load in the template each loop. Now I am not sure what to put inside the src="???".
what i have so far and its working:
{% for image in images %}
<li>
<img src="{{image.img}}" alt="" width="250" height="250">
<!-- I am not sure which line of code to include in src="" -->
</li>
{% endfor %}
also tried creating a variable like this:
{% static "img" as baseUrl %}
<img src="{{baseUrl}}/{{image.img}}"
put .url at image src
{% for image in images %}
<li>
<img src="{{image.img.url}}" alt="" width="250" height="250">
<!-- I am not sure which line of code to include in src="" -->
</li>
{% endfor %}
I am fairly new in Django and developing a book recommendation system using Django and PostgreSQL. I have my dataset with some field that also keeps corresponding book images URL (not the images itself) where images reside in other places, not in my static files or database. i want to access that images online and display them in my Django template here is how I tried to do but didn't work and doesn't access the image.
<img src= {{ book.image_url.url }} style="display:block;" width="100%" height="100%" alt="">
and also tried this:
<img src="{{ book.image_url.url }}" style="display:block;" width="100%" height="100%" alt="">
where book is dictionary and images_url is simply a url string for image residing somewhere in the web.
can you help me out how to access this string of url on the web and display it on django template ?
For urls, you want to use a different template tag. Try this:
<img src="{% url book.image_url.url %}" style="display:block;" width="100%" height="100%" alt="">
This is my first project with building a website. I have been following these tutorials. I browsed through the Bootstrap components page and found a Carousel method (slides only) that I wanted to use. I copied and pasted it into my code. The first image shows up which is correct, because it is active, but the Carousel does not slide to the next image. The first code block shows a summed up version. The second block of code is after running python manage.py runserver. The third block of code is when I open the IP address link. I am not sure what I am doing wrong. Any suggestions? Let me know if you need some more information.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AeroTract</title>
<meta charset="utf-8" />
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#FFF8DC"> <!-- Main page background color -->
<div class="container-fluid" style="min-height:95%; "> <!-- Footer Height -->
<div class="row">
<div class = "col-sm-2"> </div>
<div class="col-sm-8">
<br>
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/Forestry.png' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Agricultural.png' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Industrial.png' %}" alt="Third slide">
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</body>
</html>
(base) C:\Users\name\PycharmProjects\Django_tutorials\mysite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
May 07, 2020 - 14:46:06
Django version 3.0.6, using settings 'mysite.settings'
Starting development server at http://#########/
Quit the server with CTRL-BREAK.
[07/May/2020 14:46:42] "GET / HTTP/1.1" 200 3408
You are only including the css from bootstrap. I believe you also need the javascript.
You may want to add the these scripts:
https://getbootstrap.com/docs/4.4/getting-started/introduction/#js
In my experience popper.js.min file was apparently clashing with bootstrap. Disabling that solved the problem.
I am creating a website with django and I have a dropdown menu like this:
<li class="dropdown">
<a data-toggle="dropdown" href="#">{{ user.username }}</a>
<ul class="dropdown-menu dropdown-menu-left">
<li>Profile</li>
<li>Requests</li>
<li>Your cars</li>
<li>Your reservations</li>
</ul>
</li>
If I go to a page that contains this piece of code:
{% load bootstrap3 %}
{% bootstrap_javascript jquery='full' %}
The dropdown menu is not working, but if I remove the 2 lines above the dropdown menu works fine.
Knowing that I have to keep this 2 lines, how I am doing to solve this problem
you need to follow the sequence first bootstrap.css file second jquery.js then popper.js and then boostrap.js don't forgot to link popper.js this file are use for the open model
boostrap.css using link tag
jquery.js using script tag
popper.js using script tag
bootsrap.js using script tag
<head>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
i give CDN link put in your code other wise download those file and link them,i gave you the above stuff follow those sequence & don't forgot proper.js or jquery.js
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
if this work then make right answer if don't work please give the console error that show you in your browser,
if i try to add a simple static address with this code:
<img alt="" class="img-responsive" src="{% static 'img/"Diamond Arshad.PNG"'%}">
it works,
but when i try this code:
{% for B in productss%}
<img alt="" class="img-responsive" src="{% static 'img/"{{B.image}}"'%}">
{% endfor %}
to get data from my database with the help of loop
it doesn't give me exact address:
it gives strange address while in my database there is the value is Diamond Arshad.PNG
Use the url property of your ImageField directly (i.e. without {% static %}:
<img src="{{ B.image.url }}">