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.
Related
I'm using the download href attribute to force the browser to download files. It works but in the case of png it does not:
<a class="esdc-AnchorBtn save" title="Download the image file in PNG format" href="http://csaint.esac.esa.int/ftp_public/jcook022221192/CSA_CG_PREGEN_6HOUR_jcook02_20181031_154434__20060111000000.png" download=""></a>
The image is rendered in the current browser window or a new tab if I add the target="_blank".
I guess this is happening because the Content-Type returned is "image/png"
Is there someway to force the browser to save the image.
Thanks
There are several things that could be going on.
But first, the download attribute only works under the following conditions;
This attribute only works for same-origin URLs. (ex: the page with the link must be on the domain csaint.esac.esa.int, as that is where hte link points to.)
Although HTTP(s) URLs need to be in the same-origin, blob: URLs and data: URLs are allowed so that content generated by JavaScript, such as pictures created in an image-editor Web app, can be downloaded. (In your case, is your page HTTPS?)
If the HTTP header Content-Disposition: gives a different filename than this attribute, the HTTP header takes priority over this attribute.
If Content-Disposition: is set to inline, Firefox prioritizes Content-Disposition, like the filename case, while Chrome prioritizes the download attribute.
In terms of your syntax, if you don't want to change the filename it should look like this:
<a [...] href='example.com/image.jpg' download></a>
If you want to change the filename, that is when you should set the attribute to have a value.
<a [...] href='example.com/image.jpg' download='myImage.jpg'></a>
When it comes to browser availability, it is pretty good. There are some that do not support it however, like IE. You can take a look at the details here: https://caniuse.com/#feat=download
I have saved a complete HTML page from a server using Chrome.
When I load the local file again in Chrome, the SVGZ images do not render and instead shows a broken image icon.
Double checking the file and loading again from the original server, I find that the SVGZ loads just fine
If I load just the local image file on its own, I get prompted to save the image
If I edit the local image filename extension to .SVG, and load on its own, it renders just fine
If I then edit the HTML file to refer to the renamed file with the .SVG extension, then the entire page and image all loads correctly
I know this is not strictly a programming issue, but in doing a lot of searching, I have found more closely related answers here on StackOverflow than on say AskUbuntu.
This answer provides the best clue I have found thus far:
Chrome not rendering SVG referenced via <img> tag
I came here because I had a similar problem, the image was not being
rendered. What I found out was that the content type header of my
testing server wasn't correct. I fixed it by adding the following to
my .htaccess file:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
So I am guessing that the problem lies somewhere with:
when loaded from the server, the content type is correctly specified
when loaded from my local file, the content type is NOT correctly specified
Is there any way to resolve this ?
Can I "mimic" the .htaccess mime type and encoding by changing a Chrome setting ?
Any advice is appreciated.
I created a test HTML file with an <img> that loads a .svgz file. It worked okay (Chrome on Win7).
Check that your .svgz file is actually a gzipped SVG file, and not something else. For instance I suspect that it is actually a normal SVG file but with a ".svgz" extension. That will fail in the way you describe.
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?
I am new in Ubuntu, as well as using lampp, My problem is, after storing image in image folder of my apps, image is not showing in HTML file ( image not found ). localhost document root is /opt/lampp/htdocs/, and my root folder is f_21 if I use the following link
http://localhost/f_21/index.html // not works
But image showing works well if I use following link:
file:///opt/lampp/htdocs/f_21/index.html // but it works
Any idea ??
You should keep both image and index.html files under htdocs.
for you,place your index.html and image files under f_21 folder and update src attribute of img tag in your index.html
If the link to the image is an absolute path based on your file system with the file protocol, then you won't be able to load it when viewing the html page over http.
Chrome doesn't (I'm not sure about other browsers) allow loading local resources on a file requested with http.
If you're using chrome, you can press ctrl+shift+j to see the console, which will show any errors. You might see something like: Not allowed to load local resource.
The solution is to change the src of the image to be relative to the html page it's on.
Could anyone tell me why mozilla firefox unable to display the images where explorer can do? I even changed the extension with CAPs in all ways i can but not yet working. I have written a HTML file and my IE can open in the way i want but when i open my HTML file using the mozilla it is not displaying images but just leaving the image borders.
And also IE can reference to the CSS sheet path and making the changes but wheareas the mozilla its unable to link with css sheet path I have set the text color and font size in my css sheet and linked it with my html file. Its working perfect in IExplorer but not with the mozilla. I have been asking these thing How do i make a standard HTMl file that works on every browser And i got some answers from you but still I am unable to make it work .Can anyone tell me a good document to go through because no matter how i try its working on one browser and throwing the error on some other browser
Im giving it as src="d:\text\image.png"
If you are using absolute paths with drive letters, e.g. <img src="C:\www\images\foo.png" alt="foo">, it will work with Internet Explorer but not with Firefox. If you include drive-letters etc. in the path, the path becomes Windows specific, something that IE can understand but other browsers may not.
To fix the problem, you should use relative paths, e.g. <img src="images\foo.png" alt="foo">. The path should be relative to the HTML file where this code is present.
Most often, web pages are written to be hosted on web servers. Images are usually put under an 'images' directory inside the document root (web-root), say, /images/foo.png. Now, the home page at /index.html can include this image either using a relative path: <img src="images/foo.png" alt="foo"> or an absolute path (path from the document root): <img src="/images/foo.png" alt="foo">. Note the usage of forward-slash as opposed to back-slash. You should use forward-slash. Back-slash is very Windows specific and other browsers may not understand it.
The same applies for CSS or any other paths used in your HTML documents.
For me worked (for Mozilla Firefox v 26.0).
<img src="file///C:/User/MrBrown/www/images/foo.jpg">
Didn't worked:
<img src="C:\User\MrBrown\www\images\foo.jpg">
instead of specifying the path as src="d:\text\image.png"...
change the path as src="file:///D:/text/image.png"
if the folder name are having spaces.. then instead of spaces, write %20. or else open that image file in any of the web browser.. and copy the address from the address bar and paste that address as src path..
it will work for both Google chrome and firefox..