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'">
Related
The image is correctly saved to the static filed that I set in the setting filed. The image will display properly if I use a static path. But when I use a dynamic path, the image would not show and no error is given. As you can see the path, when called outside of , works correctly. But when puted inside of the , both {{item.image_1.path}}, nor {{item.image_1}},would show any picture. (item is the name of the model while image_1 is the name of the image_field)
-----------For the not working dynamic path:
{{item.image}}
{{item.image.path}}
<img src='{{item.image}}' alt=''>
<img src='{{item.image.path}}' alt=''>
[![for the not working method[1]][1]
-----------For the working static path:
{% static 'arrival7.png' as pic %}
<img src='{{pic}}' alt=''>
You can do like this:
<img src="{{ item.im }}">
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 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.
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 want to display an image in my dossier.index page (blade). I've already defined an image with the following path:
/resources/assets/icons/step_1.png
What would be the correct syntax to get my image displayed in my view?
I've already tried something like this:
<img src="/resources/assets/icons/step_1.png">
Or with blade:
<img src="{{ URL::to('/resources/assets/icons/step_1.png') }}">
Use asset() helper:
<img src="{{ asset('icons/step_1.png') }}">
Also, public assets should be in public directory.
URL::to is generate absolute url to the given path and URL::asset is generate to an application asset. So use below code to display image.
<img src="{{ asset('icons/step_1.png') }}">
See the basic of laravel helpers
First, move /resources/assets/icons/step_1.png to storage/app/public/assets/icons/step_1.png as "Storage" directory should be used to store such publicly accessible files as per the Laravel's offical docuemtnation:
https://laravel.com/docs/5.3/filesystem#the-public-disk
Then fire below artisan command:
php artisan storage:link
Then
<img src="{{ asset('storage/assets/icons/step_1.png') }}">
This is the proper way to use such assets in Laravel.
Now, it should work.