Jpeg, png, gif format images are not displaying in any browser - html

I am designing a website, I am creating some images for that website by using the illustrator and photoshop software, storing those images in jpeg, png and gif formats. I am writing code for the website in the eclipse software, because I am using jsp and javascript to debug it.
My problem is, the images I have created and linked to the html file are displaying in the Eclipse browser (It is an inbuilt browser to check the code). But, they're not displaying in any other browsers like IE, CROME, FIREFOX.
Can anybody help me?
Thanks in advance.

Off hand, it sounds like you don't have the images linked properly. Aside from checking the code itself, I'd view source in Firefox ( CTRL + U ) and try clicking on the img src urls. If clicking them doesn't load the actual image file, your links are wrong.

Related

HTML iframe audio file background

On a project, i have an iframe and a link targeting it. The link leads to an mp3 file. However on google chrome, and maybe other browsers, the iframe appears with a horrible black background.
Is there any way to fix this?
All solutions i have found so far talk about changing the background in the source file, but this is not possible for me as it is an mp3 file not an html file.
You have zero control over the default presentation of an audio player when you link to it in this way. In fact, it's very common that the file will just be downloaded instead of played in a browser.
If you want to control it, you need to build an HTML page that loads the audio file.

PDF Thumbnails in HTML5

Can anyone suggest me how to create a PDF thumbnail which shows a miniature preview of the pdf file in html5. Something similar to the behaviour seen in Gmail while uploading pdf files.
Currently am using embed element, but it gives me unnecessary scrolls and not able to zoom in the file,which works across all browsers. If I set #zoom it works only in chrome.
This can be achieved using https://mozilla.github.io/pdf.js/
If the thumbnails are not compatible in browsers like IE, including compatibility.js from the same library would solve the problem.
We have to create a canvas and use the library utility to get the thumbnail in the canvas.

Load a different image in Outlook HTML

Im creating an email template with a gif, but gifs animations doesnt work in Outlook. I know that Outlook loads the first frame of the gif, but in my case, this first frame is a white frame.
Is anyway to load other image (a jpg image for example) ONLY in Outlook???
Thanks.
Gif normally are blocked by mail services.
If you create an HTML template you can put a .jpg or .png without problems.
You can also put an image without problems although it can be blocked.

Change background color in PDF viewer using either embed, object or iframe methods

I've been playing around with different methods of displaying PDFs with the goal of finding a way of changing the grey background to white.
Here is a simple example using object tags (I get the same result with embed and iframe tags):
http://jsfiddle.net/5CALy/7/
HTML
<object data='https://dl.dropboxusercontent.com/u/58922976/test.pdf#view=FitH&scrollbar=0&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='84%'
height='110px'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='https://dl.dropboxusercontent.com/u/58922976/test.pdf'>click here to download the PDF file.</a></p>
</object>
Thanks!!
The OP Link actually now succeeds by default, here is the view of requesting no pdf where response is with image on white background
https://dl.dropboxusercontent.com/u/58922976/test.pdf
However it is normal to use a dark or light presentation background for images PowerPoints pdf other viewing
It is entirely up to the viewer
This browser only opens files in external mode
Or why not rainbow friendly?
But for the answer, ask users to do it themselves
For Firefox users there is a hack see How can I enable dark mode when viewing a pdf file in firefox https://stackoverflow.com/a/74564207/10802527
You can but cannot!
I mean,
Every browser (Chrome, Edge, Firefox, Safari, etc.) use their own PDF engine for displaying embedded PDF Files. You can use JavaScript or jQuery to detect the element which has the grey color and change it to white but you'll have to do this for every browser available in the market which is nearly impossible. Moreover, Web Browsers do not provide you an API for this.
The only better solution for this is to make your own PDF Viewer:
You can use this https://mozilla.github.io/pdf.js/ opensource package (By Mozilla) to get it done.
Welcome!

Convert HTML Page to SVG Image via PhantomJS

I am currently testing the PhantomJS system to generating screenshots of different websites...
The current rendering output of the images is a .png but what I need is a SVG image.
Does someone know a way to do this?
Here I found a tool which converting web pages into vector format screenshots: CutyCapt - it also rendering into other formats like png...
Have FUN! :)