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}}"/>
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 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 have the following razor syntax to get the picture from controller (From database table):
<img src="#Url.Action("GetMainPicture", "Product", new { item.ProductID, #class = "img-responsive" })" height="300" width="230" alt="" />
Which works just fine i can get the images in <img> tags as you can see in above code.
Now in the template i downloaded it for my project i have this here below, which is a href styled with a button to zoom the image with fancy box:
Zoom
The code line above works if i give a straight forward path for the image (path for the image within a folder or something not database) but i can't get it working fetching the image from database and then show it on a fancy box which fancier.
Thank You!
EDIT: Not to forget the images are in the database table.
You have to put the full url there, without ../ I think
but now I would like to have a href (link) to that specific picture
how can I do it?
You just need to wrap your image inside a anchor tag.
<a href="someURL">
<img src="#Url.Action("GetMainPicture", "Product", new { item.ProductID, #class = "img-responsive" })" height="300" width="230" alt="" />
</a>
You can do like below. Set the href attribute of anchor tag (<a>) to where you want or what the operation you want to perform when user clicks on the picture.
<a href="#Url.Action("GetMainPicture", "Product", new { item.ProductID})">
<img src="#Url.Action("GetMainPicture", "Product", new { item.ProductID, #class = "img-responsive" })" height="300" width="230" alt="" />
</a>
<a href="#Url.Action("GetMainPicture", "Product", new { item.ProductID)">
<img src="#Url.Content(#item.image)" class="img-responsive " style="height="300" width="230"" alt="#item.ContName" />
</a>
i have used this approach to take the client to a new form where he gets all the detail about the product and this is working for me so it may help you
Use the image link and the Url.Content in razor like this example:
<img src="#Url.Content(item.Image)" alt="MyImage" />
or:
Load Image
Please I need your help with the code below. I want to add an onclick event to a whole DIV to redirect to an url but I cannot bypass the href included in a child anchor inside the DIV.:
i.e. (The goal is to redirect to google.com clicking anywhere on the image or the text):
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
This works fine when I use a local URL like 'file:///E:/Documents/Blog/Design/Tmp1.html' (I don't know why).
Thank you.
Update: I'm adding the idea behind this request: I need this for the Index section of my blog that Blogger builds with the same routine that it uses for individual posts. In the Index I want that every click in the main Div redirects to the Post, but inside the post a click in the image must goes to the image's href. My idea was that the "onclick" event it's added dinamically to the DIV only for the Index section.
If you're intent on doing this inline (not recommend but it's your code), you can add a return false; to the inner anchor:
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/" onclick="return false;">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
Update: based on step 2 of your request (this is a terrible, terrible idea for a number of reasons but it works):
<html>
<div onclick="location.href='http://www.google.com'">
<div>
<a href="http://en.wikipedia.org/" onclick="if ( this.parentElement.parentElement.onclick ) { return false; }" id="demo">
<img height="200" width="200" src="http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png">
</a>
Test
</div>
</div>
</html>
Set an onclick handler using javascript. the code would look something like this:
document.getElementById("mydiv").onclick = function(){
// navigate to new page
window.location.href = 'URL';
}
You will need to add an id to your div and pass it properly in the getElementById function.
You can also try something like this:
<div onClick="window.open('http://www.google.com','_blank');">
Change _blank with _self if you want it to open in same window.
I'm using a custom theme based on "Contoso". I've edited the "Branding" file in my custom theme to show my logo:
#{
var homeUrl = Href("~/");
}
<h1 id="branding">
<a href="#homeUrl">
<img src="Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
</a>
</h1>
I can see the logo fine on regular pages. I've got a list of custom content items on one of my pages though, and when I click on the title of one of the content items in the list to show the details of the item, the logo at the top shows as a broken image... What would cause this?
Use
<img src='#Href("~/Themes/myTheme/Content/Images/logo.png")' alt='Our Logo'/>
Your img url path was not defined as relative to the root. More info here: http://brugbart.com/Articles/paths
This should also work: Notice the '/' at the beginning of the url
<img src="/Themes/myTheme/Content/Images/logo.png" alt="Our Logo" />
It is better to use
<img src="#Html.Content("~/Themes/myTheme/Content/Images/logo.png")" alt="Our Logo" />
Use ~/ as sugested, #Html.Content("~/...
The compiler tracks the route and makes the URL from the site root, ie, ~/ is replaced by the site's root.