I am trying to get background images working for html output from a system I develop for. I can output the page correctly, but the background images do not correctly display when referencing a file on the local machine; however if I reference the same image from an external site it works correctly.
I have the html file saved at <USER_DOCUMENTS>\Test_HTML.html and the example local image saved at <USER_DOCUMENTS>\images\test_image.png. The image I am using for the example is this, but any suitable image that can be externally referenced should suffice.
Test_HTML.html
<html>
<head>
<style>
td{font-family:arial; font-size:12pt; border:solid black 1pt;}
.test_class{background-image:url(images\test_image.png); background-repeat:repeat; background-position:top left;}
</style>
</head>
<table>
<tr>
<td class="test_class" style="width:40pt">Baap</td>
<td class="test_class" style="width:60pt">Beep</td>
<td class="test_class" style="width:80pt">Biip</td>
<td class="test_class" style="width:100pt">Boop</td>
<td class="test_class" style="width:120pt">Buup</td>
</tr>
</table>
<hr/>
<img src="images\test_image.png"/>
</html>
When viewing this in a browser (tested in Chrome, Firefox & IE), the image below the horizontal rule displays correctly, but there is no background displayed in the table. However if url(images\test_image.png) is replaced with url(<EXTERNAL_FILE_LOCATION>) then the background images display correctly. The desired behaviour is to be able to use the local file and get the same output as when using an external file location.
I'm at a bit of a loss as to how to get this to work correctly on the local system, and any help would be appreciated.
Like, I mentioned in my comment above, "\" or backslash is generally used for referring to the absolute path of a path and is a Windows standard for referring to the location of files.
We make use of "/" or forward slashes as they are used to refer to the relative path with the current working file. So,
./ refers to the current working directory.
../ refers to the parent directory.
./images/ refers to a folder which is present in the same location as the working directory and likewise to access the files inside the folder, you put a forward slash to refer to it.
As for, why it worked when you used the backslash path inside the img tag but not in the css, I'm not really sure of. But it's not a good practice and definitely not the proper way of doing things. Hope, it helps.
Replace the slash '\' to '/'. URL's have to be in forward slash
Related
Each time I try to add an image to visual studio code I keep having to inspect and get the entire image source code.
I would like to just use /images/down-chevron.png.
Any help?
Thanks!
Example of my code:
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/up-chevron.png" id="upArrow" onclick="upArrow()">
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/down-chevron.png" id="downArrow" onclick="downArrow(
</div>
You're almost there. Just replace the "file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services" with a dot from the src attribute and you'll be good to go.
<img src="./images/down-chevron.png" >
In VS Code, depending on your autocomplete settings, each time you write src, should give you options for autocomplete including the images folder.
You could store the images you'd like to use in a folder called img inside of the folder where your HTML and css live. Then for the img tag in the HTML you could use something like
<img src="./img/down-chevron.png">
The ./ lets you navigate through the working tree. Using ../ would go back two directories if needed.
I am using notepad ++ for starters. I created a parent folder in my documents where I save my code, within that folder I created a subfolder to store images.
Below is the code I am using
<section>
<img src="img/vietnam.jpg"
</section>
Why won't it display? I have named the image vietnam.jpg in my subfolder :S
Here the issue it could be because your are not getting to the right path where your image lives.
If you have, for instance, your html file contained in a folder which is at the same level of your img folder then you should add ../ in order to get up one level and then specify which folder you would like to get into, in this case img folder.
Ex.:
<section>
<img src="../img/vietnam.jpg" alt="vietnam">
</section>
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
If your HTML source file (e.g. index.html) is in the folder c:\Users\Patricia\Documents\adv, then as your img folder is a subfolder of \adv, the following should work.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<img src="img/vietnam.jpg" alt="vietnam">
</section>
</body>
</html>
What is the path to your HTML source parent folder?
Well, first of all i would suggest you to switch your code editor (e.g. to VisualStudio code as it is one of the editors used/preferred widely in the industries. Of course there's other Editrs/IDE's like WebStorm and so on ). Basically with the right plugins/configurations you will fasty become a superhero. For example, look at the screen below. I used relative path in VisualStudio and it shows the current path you're currently in.enter image description here
you are missing the closing bracket of img-tag, which leads to invalid html that cant be displayed properly
look at the example https://www.w3schools.com/tags/tag_img.asp
<img src="/img/vietnam.jpg" >
I was working with the image tag in HTML.I had a line in my file:
<img src="Static_Content/img1.png"/>
The code rendered the image in the browser. However, when i changed the folder name to Static-Content the image was not rendered. The equivalent line of code was changed to:
<img src="Static-Content/img1.png"/>
I am curious to know as to how the introduction of - in the folder name restricted the use of the image. Also, what are the other restrictions ?
I have tried everything to get a background image to work but have had no luck.
I'm using most current versions of Windows and IE.
Works fine server side.
Does anyone have an example?
Note: The img tag in the body renders the image just fine.
also tried background:url...
<!DOCTYPE html>
<html>
<head>
<style>
html { height:100%; width:100%;
background-image:url("file://C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg");
}
</style>
</head>
<body>
123...<img src="C:\Users\Public\Pictures\Sample Pictures\florida-orlando-resort.jpg"
style="width:100px; height:100px; display:cover;">...456
</body>
</html>
1. Use a single Forward-slash / like C:/Folder/Images/image.jpg (preferred)
2. Escape your backslashes \\ like C:\\Folder\\Images\\image.jpg
Theoretically you should escape also the backslashes that you use in image's src:
<img src="file://C:\\Folder\\Images\\image.jpg">
(or again use simply a single /).
Due to some accidents in programming history Windows paths uses \. You would normally access your image using: C:\Folder\Images\image.jpg.
Browser gateways tries to normalize that issue for you and looks like it works in HTML syntax. CSS style instead (I believe the way it's parsed) needs to follow the escaping directive for unwise characters (\) translating it to a Windows understandable path.
I encourage you to simply forget about \ and use it the way you'd do on a live server:
background-image: url("C:/Folder/Images/image.jpg");
and respectively in HTML
src="C:/Folder/Images/image.jpg"
An additional note is that you should preferably use lowercase folder names.
P.S: from file: environment on Windows (NTFS filesystem) an all-lowercase path might match the desired file, but the same might not work on a live server. Such mistake might lead to small headaches, so try always to use lowercase
How do I display an image which is located outside the context root.
i.e the image is located in <jboss_root_folder>/images/myImage.jpg .
How the src of img tag should look like in such case?
Any lead in this regard will be of great help.
The below line works in a html file : <img src="file:///G:/DevEnv/jboss-5.1.0.GA/images/DSCN0968.jpg"> where as the same line from my xhtml does not work when accessed from server
Regards,
Satya
You can either give the full url i.e. http://www.example.com/root/images/myImage.jpg or use relative paths i.e. if root is two levels down from the page location: ../../image/myImage.jpg. For an example, see this page.