Click here to Skip to main content
15,889,595 members
Articles / Web Development / Apache
Tip/Trick

A New Discovery?: Omitting File Extension in SRC attribute of IMG tag

Rate me:
Please Sign up or sign in to vote.
4.17/5 (3 votes)
18 Oct 2011CPOL1 min read 21.6K   1   5
Image can also be shown without specifying its extension in HTML doc if it is on server
[First of all, I don't know whether I have selected a proper section for this or not. I didn't find a perfect section for this. If the selected section for this trick is not valid, I am sorry; and if possible, I would change it if you have a good section suggestion.]

I accidently found a new thing that the extension (including the dot) of an image file can be omitted in the SRC attribute of IMG tag in HTML file.

So
HTML
<img src="pencil" />

is valid and showing the image if the actual file name is "pencil.jpg".

When I put 3 images pencil.png, pencil.jpg and pencil.gif in a folder and put 3 IMG tags in HTML file.
HTML
<img src="pencil" />
<img src="pencil" />
<img src="pencil" />

-----
Update:
This code is showing 3 PNG images in Firefox and Internet Explorer; but Chrome, Opera and Safari are showing 3 JPEG images!
-----
Omitting file extension also worked when I used stylesheet:
HTML
<div style="width:100px; height:100px; background-image:url(pencil)"></div>

It is displaying the image as background in a 100x100 pixel sized Div.

This trick worked on my computer on WAMP server (Apache) (http://localhost/example.htm), but it didn't work when I opened the file directly in browser (file:///c:/wamp/www/example.htm). This trick also worked with HTML-5 document.

I have Win 7 Ultimate 32-bit with WAMP Server 2.0c installed.
-----
Update:
I checked this on both Windows and Linux servers but it is not working on live servers. :-(
Totally confused. It is working on my computer having server of Apache and Windows 7 OS but it is not working on live Windows or Linux servers! It is also not working when the file is opened from local harddisk.
-----

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
I am a web developer. My expertise is in PHP, HTML, CSS, JavaScript, MySQL, VB.NET, Photoshop etc. I also have some knowledge in ASP.NET, C#.NET.

I am an innovative thinker so I like to find simple, easy and innovative ways of solving day-to-day problems. I like programming and problem solving and helping people. As I am knowledge hungry; I like to use the internet and softwares to gain as much knowledge as possible.

Comments and Discussions

 
QuestionNot Working in Firefox 21.0 Windows 7. Pin
User 100606655-Jun-13 19:28
User 100606655-Jun-13 19:28 
General[I had first posted this trick in The Launge, then a user to... Pin
Nikunj_Bhatt19-Oct-11 1:14
professionalNikunj_Bhatt19-Oct-11 1:14 
[I had first posted this trick in The Launge, then a user told me to post this trick in this section.
Here is the URL of that entire thread: http://www.codeproject.com/Lounge.aspx?fid=1159&select=4056020&tid=4053506]

One user given this link regarding Content Negotiation system of Apache server on the above mentioned thread:
http://httpd.apache.org/docs/2.2/content-negotiation.html#better

The resource at there seems to be the reason behind omitting the file extension. But this feature depends on what the requesting browser can ACCEPT.

I looked at the HTTP_ACCEPT headers, they are as following:
FF: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
IE: text/html, application/xhtml+xml, */*
GC: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Op: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
Sf: application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5

Here we can see that FF, IE and GC have not provided anything regarding image accept type, while Op and Sf have given priority to PNG images. Now, FF, IE and GC have not provided any clue about image type than how the server decided to send PNG image to FF & IE and sent a JPEG image to GC? On the other hand, Op and Sf have image/png as first occurrence but they are displaying JPEG image!

On the content negotiation page, there is some important text about selecting media type based on the Quality factor, which is supplied in the HTTP_ACCEPT header with the option "q". IE is not supplying the quality factor but other browsers are, and they are almost similar!

Another thing that may apply to content negotiation is the Typemap file on server. This file lists media types and their Qualify (not Quality) Source factors (known as "qs") of most of media types. But this may not apply in this situation because if the qs factor is applied, the server would always send an image having the highest qs value; but this is not happening too!
GeneralReason for my vote of 1 A pointless discovery, just yet anot... Pin
SteveScanlon19-Oct-11 0:23
SteveScanlon19-Oct-11 0:23 
GeneralThe contents of the SRC are meant to be passed verbatim to t... Pin
Richard Brett18-Oct-11 12:12
Richard Brett18-Oct-11 12:12 
GeneralReason for my vote of 4 Interesting. Pin
Dr.Walt Fair, PE16-Oct-11 6:22
professionalDr.Walt Fair, PE16-Oct-11 6:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.