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 }}">
Related
I want to use an external link as an image in img tag in HTML in flask.
I know how to do it by keeping the images in static folder but my case is different.
I want to do something like below code in index.html:
<body>
<h1>external image</h1>
<img src={{url_for('static',filename='https://unsplash.com/photos/uUVkzxDR1D0')}}
alt="No image">
</body>
My Flask looks like this:
from flask import Flask,render_template
app=Flask(__name__,static_url_path='',static_folder='static',template_folder='templates')
#app.route("/")
def index():
return render_template("index.html")
I tried removing the static endpoint from the url_for function as it does not makes sense to search for an external image link into static folder, but then I got the error that url_for requires an endpoint.So, I don't know how to put the image link.
Everything is just working fine. Only the image is not getting
rendered and I am getting the alt text, i.e., 'No Image' on screen.
Any help would be greatly appreciated. Thanks in advance for the help.
Why not simply:
<img src='https://unsplash.com/photos/uUVkzxDR1D0'
alt="No image">
Of course this hotlinks that image from the remote server within your page, which some hosts may disable for their images.
Within your flask app:
def index():
...
img_url = "http://cooldomain.rofl/image.png"
return render_template("index.html", img_url=img_url)
In your template index.html:
<html>
<img src="{{ img_url }}" alt="This is an image">
</html>
This way you don't need to hard code a URL into a template.
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 want to know How to add image in laravel.
I also know it can do using html/css. But I want to know how to give image path and where put images in laravel(I suppose public img folder in laravel).
Please help me.
Thanks in advance.
<img src="(How to give image path??)" alt="" style="width:100%;">
You need to store your images in the public folder and then you can access them like this
{{ asset('/my-picture.png') }}
You can also access them using Laravel Collective package for building forms and HTML elements, so your code will look like this:
{{ HTML::image('/my-picture.png', 'about the picture') }}
I solved my problem as following:
<img src="img/pictureName.jpg" alt="">
img is folder in public.I only give path in image simply.
Thanks all.
The storage_path() is OS file system path. For example in Windows it will be C:\project\storage or *nix /var/www/project/storage.
The <img> can't read the OS path. They read URL, something like http://domain/image.png.
For example to read images inside storage_path, add this inside routes/web.php.
Route::get('storage/{name}', function ($name) {
$path = storage_path($name);
$mime = \File::mimeType($path);
header('Content-type: ' . $mime);
return readfile($path);
})->where('name', '(.*)');
Usage
<img src="{{ get_image('storage/images/logo.png') }}" />
<img src="{{ get_image('storage/images/other.jpg') }}" />
<img src="{{url('folder_name/file_name_variable')}}" alt="" style="width:100%;">
{{url('folder_name/file_name_variable')}}<br>
try this
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.