I got some encrypted url strings as the src attribute of <img> tags in my html page. For example:
<img src="http://192.168.1.111/business_id/ia8u7Eg8tTVungbUGxVGfh4GYf1tbnh3EyBBmsc1TapqV8/0" />
The link itself can be opened directly by the browser and can be displayed correctly. But this <img> tag in a html page is not displayed correctly with a bad image in the screen. And when I opened this link correctly in the browser, the image will be displayed in the page, apparently this is fetched from the cache.
I have been doing some research, with the developer tools, I track the request of the browser while opening this page. And here is the result:
Just find out may be it is the wrong format that cause this problem. When I opened in the browser, it is parsed correctly to jpeg:
Question is why is this happening? What can I do to fix this? I don't know the format, the server does. Suppose I want to specify the encoding of the src in <img> as jpeg programmatically , is this possible?
Related
I've created a simple img tag and set its src to a url as shown below:
<img className={"componentImageContainer thumbnailIcon"}
src="https://componentscendeveussa01.blob..../SVGLogo.svg" />
This method works fine for all filetypes (png, jpegs, jpgs, bmp) and I'm certain there is no issue in the rendering process as it shows the SVG perfectly if a local path is used. Also, there is no issue with the url because not only are they present in the database but also can be downloaded but putting the url in the browser address bar.
I have tried object tag, setting source via backround-image property in css and checking the content-type that is set in the response headers. It is of type application/octet-stream (same as all other file types). What could then be the reason that a broken image is shown whenever an SVG is fetched.
I think you need to outline the svg and upload it. I had the same issue. The font in the svg was not working in the url. So I outlined the svg in Illustrator. Worked fine.
Is it possible to load an image in HTML and load it like an actual image (Like if it was an image/png mimetype etcetera).
Example:
This is me loading an HTML document that contains <img src="RL_Dark.png">:
Loading the image through an HTML document
But here's me loading it directly from the file:
Loading the image through file
Is it even possible to let the browser handle the image loading as I am not planning on doing anything via the HTML document that would be shown to the user (Statistic collection such as Google Analytics and Alexa Analytics), if it is, would anyone be able to show me an example?
Your browser (presumably chrome) when given the direct image url, loads the image in a gallery style view (where it applies centering and shows checkerboarding) whereas when given an HTML page, chrome shows a rendered HTML page. Chrome (and other browsers) often have built in UIs for handling different types of files (another instance would be music files)
I have the following image tag, which isn't being displayed:
<img src="https://www.google.com/chart?cht=tx&chf=bg,s,FFFFFF00&chco=000000&chl=test3">
JSFiddle: http://jsfiddle.net/evs7gsk3/8/
There is an associated console error: GET https://www.google.com/chart?cht=tx&chf=bg,s,FFFFFF00&chco=000000&chl=test3 400 (OK)
The image can be viewed by pasting the url into the browser and replacing all occurences of & by &. Beware though, when you do so, you'll have the image in your cache and will not be able to reproduce the error unless you clear/deactivate your cache.
Question: Why does this happen and what can I do to prevent this from happening?
This seems to be some sort of cross origin issue. Change the image url to http and load the page with https:
Jsfiddle:https://jsfiddle.net/p9q7v2tm/
I have a chm ebook, and I decompiled it to html pages. But when I open some html pages with images, the images cannot display in my ArchLinux firefox browser.
When I saw the html source, I found the img tag is:
<img src="images/08fig02.gif;423615">, I can find the image 08f8g02.gif in the images directory, so I delete ;423615, and the image display well.
But this same page can display well in Firefox on Windows, also display well in Chrome.
So my question is: what this semicolon and the number after it mean?
The code on the html page is:
View report in a new window
Once any user clicks on it, it becomes downloaded (it is a .png file) by his browser and he is able to view it.
How can we make it opened in a new window instead?
In anchor tag give the URL of the PDF embedded page and In the PDF Embedded page, try iFrame to display the PDF, It will work
PDF IFrame :
<iframe src="http://docs.google.com/gview?url=http://ocw.mit.edu/courses/mechanical-engineering/2-000-how-and-why-machines-work-spring-2002/tools/html.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
Fiddle : http://jsfiddle.net/RYh7U/69/
IMAGE IFrame :
<iframe src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</iframe>
Fiddle : http://jsfiddle.net/RYh7U/70/
Q: Do you mean "getReport.php?id=123" isn't rendering as a .png image (it's asking the user to download)? Or is it displaying as an image, but you want it to display in a new, separate window?
If the former, you need to make sure the server sends the correct Content-type (e.g. "image/png").
If the latter, just do a Javascript "window.open()" (or equivalent)
======== UPDATE =======
My 1990's heritage with Javascript 1.2 is catching up with me :) Don't use "window.open()" - do as Pandian says and use if you want to implement a pop-up window. Here are more details:
http://javascript.info/tutorial/popup-windows
By the same token, your question is vague. If the problem is that the file is asking you to "download" (if the image isn't appearing anywhere), then your PHP program isn't sending the file correctly. At a minimum, it must set "Content-type" before it sends the binary .png data.
'Hope that helps...
View report in a new window