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.
Related
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 set up a server, am trying to load a picture on the web page, I get the alt tag to show up but the picture will not load. I have the picture in file structure '/templates/images/pic' . I have the src tag defined as '/images/pic' but it will still not load Is this an environment problem?
I have tried moving the picture into the folder with the html files and changing the src tag but still nothing
html
<img src="/mymodules/images/computer"
alt="HTML5 Icon"
name="pic"
style="width:128px;height:128px;">
python code for homepage
#app.route('/',methods=['POST','GET'])
def home() -> 'html':
return render_template('entry.html', page_title='Logica1 Err0r')
I have got the 404 error every time
I think I see your problem.
You need the WHOLE path of the image.
if you say the name of the image is pic, then your code should be
<img src="/mymodules/images/computer/templates/images/pic.jpg" alt="HTML5 Icon" style="width:128px;height:128px;>
Hope this helps! If it is still not working, I'll reformat my answer because the way you have your image path isn't that clear to me, but I'll figure it out.
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
Imagine you got a feed of images and as soon as you click on one image it displays it in a new template, kind of like a comment view where the picture is on top and the comments section below.
The only thing I achieved was that I displayed the clicked image in a new tab:
<a href="{{image.body.url}}" target="_blank"> <img style="width:250px; background-color:yellow;flex-shrink: 0;min-width: 100%;min-height: 100%" src="{{ image.body.url }}" />
</a>
It is not what I want though... :/
So I imagined it smth like this:
making an anchor link that passes this clicked image url to a new view(like above: "image.body.url")
in a new template take this url and display it as an image
Hopefully I described it undersandably. Thx in advance :)
Your question is a little difficult to follow, presumably your images/image urls are coming from a database? If so then pass the primary key of the image into the new view so you can display it in the new template.
thanks to the answer from #pasta1020 I made the following:
template1.html
<a href="{% url 'detail' pk=image.pk %}" >
<div style="width:250px;height:250px;" >
<img style="width:250px; background-color:yellow;" src="{{ image.body.url }}" />
</div>
</a>
urls.py
url(r'^home/detail/(?P<pk>\d+)/$',views.detail,name='detail'),
views.py
def detail(request,pk):
imagePk = Image.objects.get(pk=pk)
imagePkUrl = imageP.body.url
return render(request, 'template2.html', {'theSrc': imagePkUrl})
template2.html
<img style="width:250px;height: 250px;background-color:yellow;" src="{{theSrc}}"/>