I have an image located in here D:\clone4\java-security-service\src\main\resources\images and I want to add it to my html page, but it doesn't seem to work. I tried many ways like:
<img style="max-width: 170px;" src="./images/piechart.jpg" alt="pie-chart">
but I get nothing. My Html file is located inside a java project. I'm open to suggestions.
Use Absolute path, not the Relative one. So give the whole path since both locations of HTML file and image are from different folders.
Give src attribute: D:\clone4\...\images But Try using forward slashes instead of backslashes and prepend with file://, So the link would be like
C:/clone4/.../images/piechart.jpg
Open the image in your web browser. Then copy the path and add it to attribute src of img src location looks like this file:///D:/clone4/.../images/piechart.jpg
src="./images/piechart.jpg"
Try moving the jpg into the same folder where html file located. Then remove the path and put is as just
src="piechart.jpg"
How about you create a new folder.Lets call the folder Project. This Project folder would include your HTML files, CSS, Javascript and it would also contain your images. So there would be 4 other folders in your Project Folder. Put your various code in their respective folders, same applies with the images.
Then if you want to access the images from the Image folder,
<img src=.../Images/picture.jpg>
Related
I have a website with all images and files uploaded in wwwroot and text data are being read from database.
I have created a folder in wwwroot naming "mobile" with different programming and design for mobile users. I want to display images from the root but keep the base href for links (anchors) start from mobile/ folder.
I have tried changing the src of images using javascript but obviously it fails because the src of images does not have mobile/ in url when I set <base href="mobile/">.
$(document).ready(function(){
$(img).each(function(){
$(this).attr("src",$(this).attr("src").replace("mobile/","");
})
})
So how should I manage it? is there a way to make difference between images and anchors?
Apply root-based urls to the images (or anything that isn't an anchor); the base url doesn't get applied on these, like eg.:
<img src="/images/image1.jpg" />
and use the base url for your anchors.
So I found this piece of code: https://gist.github.com/NoUsername/9308327
I downloaded it as zip, created a new folder name "images"in the root directory (same folder where I put the HTML file), and added some jpg pics in it. But when I opened the HTML file, the images won't load.
Is something wrong with the code?
P/S: When I changed the source of the tag to "/images/<1st pic's name>.jpg", the 1st image showed up just fine, though.
I believe this script assumes you have enabled directory listing feature of apache for /images
See https://support.tigertech.net/directory-index
When you access http://your.server/images it should show a list of the files as a html page. This script uses this list to get the image urls and render them.
To enable the feature you need to create a .htaccess file inside /images with the options provided in the documentation link.
If the answer of #venimus doesn't work. Be sure about your image path. You can use fullpath istead of "/iamges", like "http://localhost/image_directory". Last of all If you image's extension in uppercase like "image.PNG" it can't find your images.
I tried to put a picture in an HTML file. If I put them using for example background-image: url('file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg'); it works However when I tried another link for a picture it doesn't work. The problem is what can I do when I will put my website online.No image will appear since this link work only in my computer I thinked about google drive so I put some pictures that I will use in my website in google drive but when I used the links I didn't get any picture on my web page (all the pictures were public in my drive)
PS: I used the method ./images/logo.png" but in vain .
There are two ways to reference images and other documents with HTML: with absolute linking and with relational linking. A good practice is to have an ordered folder estructure and reference with relational URLs.
For instance, you can have a main directory where you store all your html files and sub-directories for your images, css stylesheets, scripts and so on. Using this folder estructure, you'd reference your image with img/paris.jpg, where img is the containing folder for all your images.
This way, when you upload all your files, nothing will break.
For more infor, visit the W3C documentation: http://www.w3.org/TR/WD-html40-970917/htmlweb.html
The link "file:///C:/Users/faycel/Desktop/site%20guide/paris.jpg" calls the image in your computer. Try with the public URL of the file in Google Drive.
Its simple, you just need to put an absolute link in your image.
For example..
If your website have an img directory you can use
<img src="http://www.example.com.br/img/img.png"/>
You can use relative links.
Create a folder named images on the same location where html file is
Add all images to this directory
Instead of full path like c:/something/something/images/fil.png just use images/fil.png
When uploading the website also upload the images folder and it's contents
This fixes your problem. But don't forget to read tutorials about IMG tag and its SRC attribute.
I am having few jpeg images on "C:/images/". I would like to slide show these images on a web page.I am using java code to get the right path of the image folder and jsp as front end having html div element to display the image. I have tried like this to display single image but failed, could anyone please help me out
<div id="image" style="background-color:yellow; height:200px; width:100px;float:left;">
<img src="C:/Desktop/Images/Image1.jpg" style="height:200px; width:100px;floatleft;">
Same question in this post:
Why can't I do <img src="C:/localfile.jpg">?
but you can use "../" to locate the correct path.
http://www.pagetutor.com/html_tutor/missing.html
But why you don't want to make a folder on your on application. It is more easier than access it on your desktop, etc.
Why not just move the image to your root folder and link it?
If you need it in the C:/ folder, try doing what Newbie said, and use ../ to find the correct path.
I'm writing a component in Joomla and want to use JavaScript.
I got the JavaScript part working in a separat test html page, but now I want to include it in the Joomla component.
The problem is the relative file paths for the images. The images are stored in the media folder of joomla:
media/com_component/images
I include the external js-file with this command:
$document->addScript(JURI::Root().'components/com_component/script.js');
In the script I need the path to the image folder. I don't want to hard code the absolute path in the script.
How can I get the relative paths? Do/can I use Joomla functions for that?
Thank you
I chose to put the file path information in the css file (set the image as the background of the link).
This way the js-script is independent of the image's file path.