An object within an iframe has a src that is an svg file, type image/svg+xml. It renders as text on remote server, but as image on local server. Why? - apache

I have a web page that contains an iframe, and within the iframe is an object with a src= attribute of an svg file that displays properly when I serve the page from localhost (running apache 2.4 on Windows 10). But when I serve the same page from an Amazon Linux instance, also running apache 2.4, the svg file for the object is rendered as text. I'm quite sure the pages are the same, because the content of the htdocs tree is managed by git, and I make changes on the Windows 10 PC and commit them, then push and pull them onto the Amazon Linux machine.
I've attached two screenshots of what I see in Chrome Developer Tools for the same page on the two systems. As you can see, on the PC, the <object> expands into a #document followed by an <svg>. But on Linux, the <object> expands into a #document followed by <html>, with the source code of the svg file wrapped in a <pre> tag within the <body>. How is this even possible?? I'm using the same Chrome bowser instance, the only difference is which server is serving the page.

I offered Danny '365CSI' Engelman the opportunity to post his comment as an answer, but he didn't take it, so I'll post the answer myself. My problem was that the Apache server I was using had a rather old mime.types file in the etc directory of its configuration (I was using xampp, which has its own etc directory packaged with it). That old version of mime.types did not have an entry for .svg files. Replacing it with a newer version from svn.apache.org, and restarting the server, solved the problem.
I found this quite surprising, since my <object> element had an attribute of type=image/svg+xml, which is the same as the type given in the updated mime.types file. Surprising because the file command on the server recognized the file as having that mime type. And so the lack of an entry for .svg in the mime.types file actually caused apache to ignore the type attribute on the object element, and render the content of the object as text!

Related

How to preview a static site?

With Ruby on Rails I can run rails s -p 3000 and preview my site at localhost:3000.
With React I can run npm start and view the site at localhost:8080.
What if I just have html and CSS files, how do I preview that?
On OSX, you can run a simple web server from any directory using this command:
python -m SimpleHTTPServer 8000
Then, you can hit the directory in your browser by going to http://localhost:8000/path/to/file.html
You can try click 2 times in index.html to open the file in browser.
Every time you update the code in sublime text, you need to reload the browser and the updates will be aplied.
This usually depends on your device/OS and what your eventual goals are, but usually you can either use (online) software that renders the HTML and the CSS for you (such as Brackets.io, etc.) whilst you are typing it (to live preview any modifications/additions), or you can put the documents live using a local webserver such as Xampp or OSXs built in simple web server, and check their respective localhost locations every time you save changes using your code editor.
You could also simply use online applications like Codepen, which can also render HTML and CSS, and even JavaScript. Codepen just today launched Codepen Projects which allows you to create entire website projects at their website. It is however, a pro (paid) feature.
Here's a short overview of code playgrounds that offer the functionality you requested (by no means an exhaustive list):
JSFiddle
CSSDeck
CodePen
JSBin
And ofcourse you can insert Snippets here on StackOverflow, which is also able to render HTML and CSS (and JS).
If you really only use HTML and CSS, previewing in a browser is also possible, opening the .html file by double clicking and opening in Internet Explorer, Chrome, etc.

Including Images in RenderPDF in Play Framework

I use Play framework 1.2.x
I use PDF module renderPDF to generate PDF from HTML. I would like insert a image into the PDF.
Im trying to download image from controller downloading in the HTML which will be render as PDF as like this
<img src="#{AwardController.getSignature()}">
From the forums I found that we need to define play.pool in application.conf, So I defined it and works well in local environment. But It doesn't work in QA or Prod environment where we have two processors, so I thought it would take nbprocessors+1. I tried both defining play.pool and not defining. But there is no luck in QA/Prod environment. Please help me to resolve
UPDATE: It working when http request, but not works in https request. Do we have any settings anywhere to resolved this

Why can I view .less file through ftp, but not http?

I'm wokring on a small website that I wouldlike to use Less CSS with, but I am having trouble getting the .less file to become available. If I go to the path on the server that the .less file is at through ftp, the file is there in the browser and I can read it. However, tag in the html is bringing me to a 404 page. If I manually type in the location through http it does not work. Why might this be happening?
Requests for static files return 404 error (IIS 6.0)
Im not sure if i understood you correct, but: LESS is not a replacement for CSS. You must generate a CSS-file from your LESS-file to be able to serve it to the browser.
The reason why you cant view it in your browser is because the web server har no MIME-type for LESS-files, and it shouldnt have.
You can however view it through FTP cause its a "normal" text document.
Edit: You can also process the .less-file with javascript, but thats not recommended for production use...

Firefox doesn't understand svg on remote server

I've got a curious problem where FireFox (and IE9, I think) can display a local html file which embeds an svg, but it can't display exactly the same file when it's on a remote server. Any ideas much appreciated.
The setup is that I have a test directory which contains index.html, an svg file, and a js file. When I point any browser at index.html it correctly displays the embedded svg. However, when when I upload this test directory to a remote server, then:
1 - Opera, Safari, and Chrome correctly display the svg
2 - FireFox complains that it needs a plugin for the svg
3 - IE9 displays nothing.
Something is different about the remote setup, but I have no idea what. My suspicion is that this is an interaction of some sort with Apache (when I view index.html locally I'm not using Apache, of course - the browser is directly viewing the file).
Any ideas? Thanks.
Make sure the remote server sends the appropriate MIME type "image/svg+xml".
I run to this issue aswell on my remote server.
Adding this to .htaccess file solved my problem.
AddType image/svg+xml svg
AddType image/svg+xml svgz
For more information see SVG MIME TYPE

Apache not loading CSS files on remote browsers but works on localhost

I have an ubuntu installation on my laptop i use for web app development. When i type in http://localhost/blah.php i see my php web page as i normally would with all css style loaded and rendering fine.
When i try to connect to this same apache server from a remote machine by typing in the IP address the page loads but without any css styling at all. I also get the same problem trying to connect to the apache server from a virtual machine on the same box. I would like to get this working so i can test my web apps in IE but obviously css not loading is a problem. Any tips ?
Look into your source code and look how your style sheets are referenced.
If you have references to http://localhost/mystylesheet.css, that's your problem right there.
If that doesn't help, try to access a style sheet directly (enter the address in the browser) and tell us what happens. Also post the URL you are using. The head of the HTML document you are calling would also be helpful.