Develop Reference

Issue displaying local image files via css class and/or img src attribute

I have some issues rising up displaying Image files from local filesystem.
And to say it before: yes i am aware of the security breach this is causing and there is no other way playing it different because my company has no file Server yet to serve these images in a proper way.
With that out of the way the scenario:
I have an angular app which should show me some Images on my page. I wrote a directive called Gallery to do so.
Into this gallery I am handing in the absolute paths to my Image files and just set the src attribute via javascript. I tested it with some random chosen files picked from Google and everything worked out well. Allthough my browser is throwing out error because of security the picutres were displayed.
But when i got the real data from my company collegue Things started getting nasty. The error still thrown in console but nothing was displayed. I checked first overwriting the img.onload listener finding out that the testimages are giving me the Output i put onto the listener, my real data images didn't.
Next I tried to set the background attribute and not the src one. My test images were displayed the real data ONLY if it is placed into the assets folder of my app. This got me quite confused because like mentioned above using my test images it doesn't matter where they are placed, they are displayed everytime.
I also tried changing file format from png to jpg but nothing happens.
Also scaling down the images (real data has big px solutions) didn't work either.
So my question is simple ...what am i doing wrong? Could it be possible that those real data images are not exported properly. But if that's the case, why do they work in the assets folder? Like mentioned security block is not possible because my test pictures a doing well.

Finally I found the bug which was responsible for the behaviour ... It was no wrong linking it was the IIS Express which was caching old links. #mrunion and #cloned links to filesystem are still working on IE and also in Edge just for devs which have no other choice then to do it that way
Cheers Max

Scripts won't load in browser angular2

For some reason, I cannot get to set up my index page without having loads of trouble.
Here's my browser:
And here's my index:
I've got really no clue this time.
He doesn't want to load a local script, yes it points towards it :)

As per your project structure your src path is wrong you have to set it as a src="../../node_modules/Your remaining path" so you have to go 2 level in up direction for get your file.

Loading Images on demand without altering the src attribute

I have a website that 40 babynames are shown in each page, each name have some photos that are uploaded by users. I use iframes to show the images of each name when the user clicks on "show photos button" (iframe is created dynamically after click). Well in this case images are never indexed with search engines.
If I load them right after each name (and not in a iframe) then the page size will be very large and will load very slow.
I'm looking for a way that load images on demand (just as it is now) without using iframes. setting the src on demand will be in-vane as search engines won't have access to them and setting them will make page very heavy as I said before.
Any suggestions on how to do this?

You could use a php script that displays one singe thumbnail (1x1 pixels) when the query string ends on "small"; with ajax you can now access every single image and remove the ending "small" so that the php script uses the original file.
http://php.net/manual/en/function.imagejpeg.php might help ^^
So you access "image.php?myimage.jpg-small" and the script loads the fixed thumbnail that will get cached after the first load. Then, you change the img src property using ajax to "image.php?myimage.jpg" and we're done...
You could use a .htaccess - rewrite for better look of the image source...

You can't really get Google to index the images if they're not there to start with - could you use thumbnails instead for each image avoiding slow loading speeds and allowing Google to index them? Then on click you could replace the src tag with the full size image.
There's libraries like Timthumb that can generate and cache thumbnails for you if you don't want to write all the resizing code.

Prevent caching of Images on webpage

I am using an IHttpHandler to display an image stored in an azure blob on a webpage. This works fine. I also give the user the ability to rotate the image. The code to rotate the image is working. However when I then try to show the rotated image to the user:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=blobFileName;
the image shown on the page is not updated although the image stored at 'blobFileName' has been changed. After some trial and error I found that if I store the rotated blob under a new file name, say 'blobFileNameRotated' the code:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=blobFileNameRotated;
works and displays the rotated file. I assume that the original code doesn't work because the image has been cached by the browser? I tried running the code in a couple of browsers and found that in Chrome the original code works, but only for small files, and that it doesn't work at all in IE11.
My question is how can I control how a browser caches the image file (if that is the problem) and force the browser to re-display the image even if I haven't changed the file name. I tried setting src to a different file and then back to the blob file but that didn't work.

Not really an Azure issue but a few things to try:
You could add a cache-buster to your Image Handler URL. I'd recommend just appending a random number on the end to force the browser to re-request the URL. The problem is no image will ever be cached. Example:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&m=" + Date.now();
Use the same approach but output the number of images to be shown and change Date.now() to am image name / ID so that we as you rotate you will eventually get the same image which should be cached.
// output using some server-side logic.
var imageIds = new Array("ImageA","ImageB","ImageC");
// in an eventHander have similar to:
document.getElementById("imageControl").src = "/ImageHandler.ashx?container=images&ID=" + imageIds[currentImage]
Make sure you set the correct cache headers in your hander's C# code. See Caching ASHX Image Response

Sorry for the slow response to this, my solution was sort of working so I've only just got round to testing out Simon's better solutions. I thought I would add some other things I've found out along the way in case others come to this question looking for information about blobs and images.
My solution involved changing the name of the file each time I rotated it. This meant that I stored a new blob for each 90 degree rotation. This worked but Simon's solution just involves changing the call to the imagehandler so the blob filename doesn't need to change.
I initially ran into problems because I didn't set the content type of the blob after I had rotated it. When I then tried to use the image in a report, the code complained because it wasn't an image type.
Note that if you want to copy the content type from the blob you are rotating it is not available after you have executed:
Dim blob As ICloudBlob = GetBlob(sContainer, blobFileName)
but only after the blob has been downloaded:
blob.DownloadToByteArray(byteData, 0)
This tripped me up at another time as well because I assumed that a blob had been found because I didn't get an error on the dim blob as line of code when in fact it couldn't have been found because I'd passed in the wrong container name.
Happy blobbing.

Check for empty image

I have a folder full of .jpg images. With a PHP script I'm reading the list of images in the folder and I'm displaying them on the browser.
The problem is that some of the images exist, but something it's wrong with them. They are few Kb but they can't be displayed (on the browser I see like a broken image), of course if I download these images in local I can't see them.
I tried to google but all I found was how to recognize a broken link or an empty img tag, how can I check if the image is displayable? I also tried the onError event but it isn't fired.

IMO, you’d be better off checking this on the server, using PHP. PHP has several functions to load images, such as imagecreatefromjpeg and imagecreatefrompng. Both these functions will return FALSE if there’s an error loading the image. Getting FALSE will tell you that it’s not a valid image.