I've been trying to solve that problem since yesterday with no success. I could be missing something simple however I can't see it.
The problem I have is that Safari on Windows instead of rendering a svg image it opens a download dialog box. The website is hosted on IIS 7. I have set the MIME in the web.config as below.
<mimeMap fileExtension=".svg" mimeType="image/svg+xml svg"/>
And embedded the image as following:
<div style="width:128px; height:128px;background:grey;">
<object height="100%" width="100%"
data="/images/l-tree01.svg" type="image/svg+xml">
</object>
</div>
The path to the image is correct, the image renders well on the Firefox, Chrome and IE.
Eventually have solve the problem by examining response HEADERS of properly embedded image on another site. The issue was that the MIME I've declared was Content-Type: image/svg+xml svg instead of Content-Type: image/svg+xml.
Related
I have an issue with web I am developing HTML/CSS (only design), if I open it in firefox from my harddrive no pictures are displayed, there is a small icon instead like picture can not be loaded. If I rightclick on a icon and select open picture in new tab than picture is displayed on a new tab without issue.
But if I open webpage from my hardrive in IE, edge or chrome than all pictures are displayed directly on a page in a browser without issuel.
What can be wrong with mozilla or with page?
I tried all these recomended fixes: https://support.mozilla.org/en-US/kb/fix-problems-images-not-show.
this is picture URL: img src="D:/UserData/z003xner/Documents/My Web Sites/bubabikes/Images/30.1.2023.jpg" and i tried forward slash and bacward shash and nothing helps
Try to put the image inside the project folder for eg : {project_path}/images/1.jpg and call the image using the domain name in the project suppose the project domain is https://example.com call the image using
<img src="https://example.com/images/1.jpg" class="image" />
or if in localhost :
<img src="http://localhost/project-name/images/1.jpg" class="image" />
It’s hard to tell, but the issue may be the spaces in your file path — try replacing them in your html with %20 like this
my/file%20path%20has/spaces.jpg
You can look up “url encoding” for more information!
We have a internal website where we have some links to pdf documents hosted on the webserver. If i open Chrome Dev-Tools(F12), and inspect the link and add an embed with the same pdf document, it will rather download the file instead of showing it. I have tried with embed and iframe, but i still get the same problem.
Original code:
<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>
Screenshot:
Code that we would like to work:
<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>
<div class="fgh"><embed id="fgh" src="http://example.com:8080/client/attachment/filename.pdf" type="application/pdf" width="400" height="400"></div>
Screenshot:
As you can see, it actually downloads the document instead of showing it in the screenshot above. Just shows a white space.
Code that works with another document:
I just found a pdf document on google, and put it into the tag, and it works. It shows the document in the embed, and doesn't download the document instead.
<a id="id2239" href="http://example.com:8080/client/attachment/filename.pdf" class="act01">filename.pdf</a>
<div class="fgh"><embed id="fgh" src="http://infolab.stanford.edu/pub/papers/google.pdf" type="application/pdf" width="400" height="400"></div>
Screenshot:
Question:
Why is the two examples different? Why does the internal document download, but the external document show embedded in the page?
How do i make it work with the file on our webservers as well?
Edit:
Screenshot of the pdf documents headings.
It depends on the content type in the response header. You may check if your web server sets proper header information, e.g. Content-Type: application/pdf.
"Chrome Dev-Tools(F12)" -> Network Tab, check the response headers.
I was facing the same issue. In my case the Content-Type of my files was "binary/octet-stream". I had to manually change it to "application/pdf" to resolve it
Use the <object> tag to embed PDF files in html:
<object id="fgh" data="http://example.com:8080/client/attachment/filename.pdf" width="400" height="400"></object>
My WordPress template called BoxWP is showing black images instead of the url image I load using <img src>.
This happens only in my template and only on Safari browser. I checked on Chrome and Opera, no problems there. I checked on a separate .html file on Safari with <img src="..."> and same url to load image and it works. So the problem is only on Safari browser in combination with the template called 'boxwp'.
The file I use to show the image is content-single.php. I just put <img src="..."> tag and load the url.
Try to load this image url in the file I mentioned:
https://gloimg.gbtcdn.com/soa/gb/pdm-product-pic/Electronic/2019/05/20/goods_img-v2/20190520141054_13268.jpg
I use Safari browser on Macintosh. You can download the theme here: https://wordpress.org/themes/boxwp/.
Any thoughts what might be the issue?
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.
I'm trying to display a base64 encoded pdf. In FF and Safari the code below displays the pdf in a viewer, however in Chrome the page loads, space is created for the iframe, but the iframe doesn't display.
<apex:page controller="SomeController">
<apex:iframe src="data:application/pdf;base64,{!pdf}"></apex:iframe>
</apex:page>
I have verified that I can indeed view PDF files in Chrome on other webpages and that the Chrome PDF Viewer plugin is enabled.
This ended up working, though our dev team swears that when this was tried initially it didn't work:
<apex:page controller="SomeController">
<object>
<embed src="data:application/pdf;base64,{!pdf}" height="800" width="1200"/>
</object>
</apex:page>
Of course there is the issue that object isn't supported in earlier versions of IE, but at least it works in chrome now.
This worked for me with angular js
<embed ng-src="{{NewDocumentData_PDF}}" height="800px;" width="100%;" />