I have put my image file img.png and HTML file index.html in the same folder test
I executed index.html in django, I wanted to display image from local
I tried
<img src='img.png'/>
<img src='./img.png'/>
<img src='..../test/img.png'/> <!-- absolute path -->
the system all says cannot find the image file.
1-Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
2-In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
3-In your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE:
{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">
4-Store your static files in a folder called static in your app.
For example:
my_app/static/my_app/example.jpg.
Related
On a flask site, link to download pdf is provided on the page.
When i run the site by main.py i get the file doesn't exist error as given under,
but it works fine when i run only index.html file
the error
in main.py
class ThePage(MethodView):
def get(self):
form = InfoForm()
return render_template("index.html")
in index.html
<a href="../1668671114.892154.pdf" download>
<div class="btn-block2">
<span class="hazir">✅</span> <span style="font-size: 20px">PDF ready, click.</span>
</div>
</a>
Problem may be related to render_template part where i should add some arguments, though i couldn't figure out how to.
I think you are using a relative path to the templates directory. The server cannot resolve this URL. Use the static folder to deliver static files.
Move the pdf file to a folder called static within your application's root directory.
Inside the anchor tag use url_for('static', filename='1668671114.892154.pdf')
<a href="{{ url_for('static', filename='1668671114.892154.pdf') }}" download>
<div class="btn-block2">
<span class="hazir">✅</span> <span style="font-size: 20px">PDF ready, click.</span>
</div>
</a>
I have the following structure
my app/
|_my_app/
| |_templates/
|_static/
|_media/
|_utils/
|_main.py
|_manage.py
|_.gitignore
and having the in template.html
<img src="./media/image.png">
then it casts a GET 404 error Cannot find /media/image.png.
I have also tried relative path (relative to the template i.e <img src="../../media/image.png">.
Moving the media folder into static (and including {% load static %} I can do
<img src="{% static '/media/image.png'">
without any issues.
Why can't it find ./media/image.png in the first part?
Is there a way to do the "static" trick but with another tag (say media) e.g <img src="{% media 'image.png' "> to avoid absolute paths?
You can create a new folder named img in the static folder, then paste your image in the img folder such that the path to the image will be like this: static -> img -> image.png. You can load the image in HTML like this:
<img src="{% static 'img/image.png'">
I'm trying to add an image to an HTML page by passing the name of the .jpg file to an html jinja template from a view. The image is located in a static folder, and will appear as desired if the file name is coded directly, but not when I try to pass it in through Jinja.
Django view code:
def page(request):
location = '''src="{% static 'image.jpg' %}"'''
return(render(request, 'page.html', {'location':location})
Code on HTML page:
{% load static %}
<img {{location}} alt="image">
The image file is located in a static folder at the root of the Django project
I've also tried other combinations of string to be passed in and HTML including:
location = '''"{% static 'image.jpg' %}"'''
<img src={{location}} alt="image">
location = "'image.jpg'"
<img src= "{% static {{location}} %}" alt="image">
When I code the file name in directly as follows:
<img src= "{% static "image.jpg" %}" alt="image">
the image is presented as desired.
I feel like there is something I'm misunderstanding, but I'm not sure what. I couldn't find another question asking how to do this when I searched, so please forgive me if you know of an answer I didn't find!
OK... so this works:
location = "\image.jpg"
<img src= "{% static location %}" alt="things">
That extra slash at the start of the location variable name was what was missing! Can't believe it was that simple.
I am unable to load static files from inline-css in html file, which is present in the templates file in the django app.
For reference, the original file code is
<a class="portfolio-item" style="background-image: url(img/portfolio8.jpg);" href="">
I am trying to import portfolio8.jpg that is originaly present in the img folder in static files in django. I changed the code to:
<a class="portfolio-item" style="background-image: url({% static 'proj/img/portfolio8.jpg' %});" href="">
Doing this didnt work. It will be great if someone could help on how to load the img url from the style.
In order to load static files, first you may have to collect the static files with this command:
python manage.py collectstatic
And in the template, loading the static tag with:
{% load static from staticfiles %}
Don't pass image in the style tag. What that does is, it will set a background image for a text that is entered(which you are not passing). Try the below code, it should work for you.
<a class="portfolio-item" href="">
<img src="{% static 'proj/img/portfolio8.jpg' %}"/>
</a>
Thanks.
If you are using it in style area, try this
<a class="portfolio-item" style="background-image: url('static/proj/img/portfolio8.jpg');" href="">
I've been tearing my hair out on this... I can't get any images displayed on my website. I tried using absolute paths, relative paths, I tried different folders, but nothing seems to work...
Here is the html code:
<img src="download.jpg" width="300" height="230" style="display: block;">
It is obviously in the same folder and the file name is correct. But here is what the django server is showing me:
[03/Jan/2015 09:43:15] "GET /index/download.jpg HTTP/1.1" 404 2865
So it seems that it's trying to look for the image on the website (/index is my current location). How do I make it look for the image on my computer? I tried doing C:/{full path} but that didn't work...
Thanks!
you dont put paths in django like in php. django (if running locally, otherwise httpserver) serves them from static folder whose settings you need to make in settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
and in your template load on the top only once:
{% load staticfiles %}
and then in template
<img src="{% static "img/download.jpg" %}" alt="My image"/>
provided, you have
-static
---img
---css
---js
folder as usual
read more