This is driving me crazy. I have a small image, and I want to display a larger version when the user hovers their cursor over it. So, I have this:
$("#Portrait").popover({
html: true,
container: 'body',
trigger: 'hover',
content: function () { return '<img src="~/Images/person.jpg" width="100" />'; }
})
<img src="~/Images/person.jpg" width="50" id="Portrait" class="img-circle img-responsive hidden-xs" />
This isn't exactly how I want it to work, but I've simplified it a lot to try and make it work and it still won't. As you can see, the page to the image is identical in the jQuery function and in the HTML markup. When the page loads, the image displays correctly, but in the popover I just see the image placeholder that you get when the image path is incorrect.
If I replace the code for the image in the function, whatever I write displays correctly in the popver, so the code to populate the popver with HTML is working. When I replace the path to the image in the function with a URL to an online image, that image displays correctly in the popover.
The problem seems to be very specifically with the path to the image in the function. It fails to work both when debugging on my machine and after publishing to the web server. I've tried moving the image to the same folder as the page so that the path can simply be person.jpg, but that doesn't work either.
Any ideas?
I still don't fully understand why, but I'm guessing that reliance on the tilde (~) to specify application root is a bad habit I've carried over from coding in ASP.NET. Anyway, I fixed this problem by using the Url.Content helper to get the correct path to the image, like this:
$("#Portrait").popover({
html: true,
container: 'body',
trigger: 'hover',
content: function () {return '<img src="' + "#Url.Content("/Images/person.jpg")" + '" width="100" />'; }
})
<img src="~/Images/person.jpg" width="50" id="Portrait" class="img-circle img-responsive hidden-xs" />
Related
I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.
Replication:
dotnet new blazorwasm
I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".
In index.razor I've updated the code as follows:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size">
<image src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size"/>
#code
{
private static string Size => "75";
}
The result of running the above code shows only one image displaying
Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>
then the code works again as expected.
I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?
Update
The generated HTML using the template is
<!--!--><div class="top-row px-4" b-vv8m6rf2se="">About</div>
<article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->
<!--!--><h1 tabindex="-1">Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>
An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.
Now for a speculative answer:
Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,
The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage
This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.
But after Blazor has filled in the #Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.
The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Image Not Found"/>
How to display the alt text for an image?
If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.
There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.
You can use the title attribute.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />
Yes it's an issue in webkit and also reported in chromium: http://code.google.com/p/chromium/issues/detail?id=773
It's there since 2008... and still not fixed!!
I'm using a piece of javacsript and jQuery to make my way around this.
function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");
If you only want one some images:
addShowAlt("#myImgID");
Use title attribute instead of alt
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>
Here is a simple workaround in jQuery. You can implement it as a user script to apply it to every page you view.
$(function () {
$('img').live('mouseover', function () {
var img = $(this); // cache query
if (img.title) {
return;
}
img.attr('title', img.attr('alt'));
});
});
I have also implemented this as a Chrome extension called alt. Because it uses jQuery.live, it works with dynamically loaded content, too. I have retired this extension and removed it from the Chrome store.
Various browsers (mis)handle this in various ways. Using title (an old IE 'standard') isn't particularly appropriate, since the title attribute is a mouseover effect. The jQuery solution above (Alexis) seems on the right track, but I don't think the 'error' occurs at a point where it could be caught. I've had success by replacing at the src with itself, and then catching the error:
$('img').each(function()
{
$(this).error(function()
{
$(this).replaceWith(this.alt);
}).attr('src',$(this).prop('src'));
});
This, as in the Alexis contribution, has the benefit of removing the missing img image.
Internet Explorer 7 (and earlier) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior, according to the HTML specification. The title attribute should be used instead. Source: http://www.w3schools.com/tags/att_img_alt.asp
To display the Alt text of missing images, we have to add a style like this. I think, there is no need to add extra javascript for this.
.Your_Image_Class_Name {
font-size: 14px;
}
It's work for me. Enjoy!!!!
You can put title attribute to tag.I hope it will work.
<img src="smiley.gif" title="Smiley face" width="42" height="42">
This can be entered in the javascript console to replace empty titles with alt text (if available) for images on a single page:
[...document.getElementsByTagName('img')].forEach((x) => {
if(x.getAttribute('alt') && !x.getAttribute('title')){
x.setAttribute('title',x.getAttribute('alt'));}})
It doesn't require JQuery.
I use this, it works with php...
<span><?php
if (file_exists("image/".$data['img_name'])) {
?>
<img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
<?php
}else{
echo "Image Not Found";
}>?
</span>
Essentially what the code is doing, is checking for the File. The $data variable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.
I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
The image with invalid source displays an alternate text in Firefox but not in chrome unless the width of an image is adjusted.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Image Not Found"/>
How to display the alt text for an image?
If I'm correct, this is a bug in webkit (according to this). I'm not sure if there is much you can do, sorry for the weak answer.
There is, however, a work around which you can use. If you add the title attribute to your image (e.g. title="Image Not Found") it'll work.
You can use the title attribute.
<img height="90" width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
alt="Google Images" title="Google Images" />
Yes it's an issue in webkit and also reported in chromium: http://code.google.com/p/chromium/issues/detail?id=773
It's there since 2008... and still not fixed!!
I'm using a piece of javacsript and jQuery to make my way around this.
function showAlt(){$(this).replaceWith(this.alt)};
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)};
addShowAlt("img");
If you only want one some images:
addShowAlt("#myImgID");
Use title attribute instead of alt
<img
height="90"
width="90"
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif"
title="Image Not Found"
/>
Here is a simple workaround in jQuery. You can implement it as a user script to apply it to every page you view.
$(function () {
$('img').live('mouseover', function () {
var img = $(this); // cache query
if (img.title) {
return;
}
img.attr('title', img.attr('alt'));
});
});
I have also implemented this as a Chrome extension called alt. Because it uses jQuery.live, it works with dynamically loaded content, too. I have retired this extension and removed it from the Chrome store.
Various browsers (mis)handle this in various ways. Using title (an old IE 'standard') isn't particularly appropriate, since the title attribute is a mouseover effect. The jQuery solution above (Alexis) seems on the right track, but I don't think the 'error' occurs at a point where it could be caught. I've had success by replacing at the src with itself, and then catching the error:
$('img').each(function()
{
$(this).error(function()
{
$(this).replaceWith(this.alt);
}).attr('src',$(this).prop('src'));
});
This, as in the Alexis contribution, has the benefit of removing the missing img image.
Internet Explorer 7 (and earlier) displays the value of the alt attribute as a tooltip, when mousing over the image. This is NOT the correct behavior, according to the HTML specification. The title attribute should be used instead. Source: http://www.w3schools.com/tags/att_img_alt.asp
To display the Alt text of missing images, we have to add a style like this. I think, there is no need to add extra javascript for this.
.Your_Image_Class_Name {
font-size: 14px;
}
It's work for me. Enjoy!!!!
You can put title attribute to tag.I hope it will work.
<img src="smiley.gif" title="Smiley face" width="42" height="42">
This can be entered in the javascript console to replace empty titles with alt text (if available) for images on a single page:
[...document.getElementsByTagName('img')].forEach((x) => {
if(x.getAttribute('alt') && !x.getAttribute('title')){
x.setAttribute('title',x.getAttribute('alt'));}})
It doesn't require JQuery.
I use this, it works with php...
<span><?php
if (file_exists("image/".$data['img_name'])) {
?>
<img src="image/<?php echo $data['img_name']; ?>" width="100" height="100">
<?php
}else{
echo "Image Not Found";
}>?
</span>
Essentially what the code is doing, is checking for the File. The $data variable will be used with our array then actually make the desired change. If it isn't found, it will throw an Exception.
Is there a way to tell the browser to look down a list of image URLs until it finds one that works? Pure HTML would be preferred, but I'm guessing JavaScript is probably necessary here (I'm already using JQuery, so it's not an issue).
EDIT: Thanks for your answers! I'll add a few clarifications:
By "works" I mean the image can be displayed.
I specifically want to do this on the client side.
This seems like a bad idea to me. What is the purpose of this feature? It sounds like you want something equivalent to this:
<img src="/images/file1.jpg" src2="/images/file2.jpg" src3="/images/file3.jpg">
Where the browser would try each file in succession. The problem with this approach is that it significantly increases the http traffic required and the latency. The best approach is to dynamically construct the page using the correct image tags ahead of time. Using a server-side approach you can try to load the image from the disk (or database or wherever the images are) and dynamically include the best url in the page's image tag.
If you insist on doing it client-side, you can try loading multiple image tags:
<img src="file1.jpg" alt="" onerror="this.style.display='none'">
<img src="file2.jpg" alt="" onerror="this.style.display='none'">
<img src="file3.jpg" alt="" onerror="this.style.display='none'">
<img src="file4.jpg" alt="" onerror="this.style.display='none'">
<img src="file5.jpg" alt="" onerror="this.style.display='none'">
<img src="file6.jpg" alt="" onerror="this.style.display='none'">
This will result in a page that appears to have lots of images but they disappear as the page loads. The alt="" is required to make Opera not show the broken image placeholder; the onerror is required for Chrome and IE.
If that's not spiffy enough, and if all your images are the same size, and that size is known, you could stack a bunch of images one on top of the other, so that the first image that loads hides all the others. This worked for me in Opera, FF, and IE8. It loads the last image in the list that exists. Note that this wastes bandwidth and memory because every image is loaded.
<div style="width: 50px; height:38px; background-image: url(file1.jpg);">
<div style="width: 50px; height:38px; background-image: url(file2.jpg);">
<div style="width: 50px; height:38px; background-image: url(file3.jpg);">
<div style="width: 50px; height:38px; background-image: url(file4.jpg);">
<div style="width: 50px; height:38px; background-image: url(file5.jpg);">
<div style="width: 50px; height:38px; background-image: url(file6.jpg);">
<div style="width: 50px; height:38px; background-image: url(file7.jpg);">
</div></div></div></div></div></div>
Finally, there is the JavaScript approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var image_array = ['file1.jpg', 'file2.jpg', 'file3.jpg', 'file4.jpg', 'file5.jpg','file6.jpg' ];
function load_img(imgId, image, images, index) {
image.onerror = function() {
load_img(imgId, this, images, index+1);
};
image.onload = function() {
var element = document.getElementById(imgId);
if (element) {
element.src = this.src;
element.style.display = 'block';
}
};
image.src = images[index];
}
</script>
</head>
<body>
<img id="id_1" alt="" style="display: none;">
</body>
<script>
load_img('id_1', new Image(), image_array, 0);
</script>
</html>
If you're trying setting multiple sources to the image tag depending on the resolution, srcset is the paramenter you're looking for.
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x,
images/space-needle-hd.jpg 3x">
If I am reading the specification correctly, you should be able to do this with the HTML object element. <object> tags can be nested and thereby provide a chain of resources that are tried each in turn to be rendered and upon failure the user agent continues with the next one.
Note, though, that this behaviour is/was buggy for several browsers and versions.
Assuming you mean the browser being able to retrieve some content with an HTTP response code 200 for a specific URL, then the answer is : NO from the client side using only HTML.
In other words, you can't have an element (e.g. img) and specify multiple URLs to "try".
Of course you can craft something on the server side: a request comes in for resource X and the server has a list of URLs that "work".
INAJNBAM (I'm not a Javascript Ninja by any means), but in pseudo code, maybe try something like this after the page has loaded: (OR, now that I think about it, this would work well with PHP too)
$images = array('img1.jpg', 'img2.jpg', 'img3.png'....)
foreach $images as $img
{if $img.height > 0px
{print "<img src="$img" />"
end}
};;;;
In fact PHP would be even better because I presume in JS this would result in images flashing up on the screen at the end of the pageload. Try it out in PHP and see if something like this fits your bill.
NOTE: I added 4 semi colons at the end. I know Javascript always wants 'em, I just didn't know where to stick them.
If by saying "works" you mean the image can be loaded, you can use the "load" function on an image( in your case a bunch of images) of jQuery and inside of it declare the functionality that will be fire once the loading of the an image is completed.
If by saying "works" you mean that the HTTP status code is ok then use an ajax call using jquery.
function getUrlStatus(url) {
$.ajax({
url: url,
complete: function(xhr) {
return xhr.status;
}
});
}
You could enter the URL of some server-side application/script that serves up the image from whatever image source it can find.
You could do this in ASP.Net with an HTTPHandler that sends a response of content-type=image/jpg.
Other than ASP.Net there are amny other server-side options such as Perl, PHP...