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.
Related
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>
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 am working on a website and creating my own gallery.
However there seems to be a little problem with the code.
i wanna add my picture from my computer so it has the right width and heihgt.
here is the code.I tried to do cover in css but some images are too big and wont fit.Thank you for reading.
<script type="text/javascript">
$('#button1').click(function()
{
$('#gallery').css("background-image", 'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy');
//luffy serieuse kop
}); </script>
and this is my second button wich works perfectly fine but also wanna change because width and height problems
<script type="text/javascript">
$('#button2').click(function()
{
$('#gallery').css("background-image", "url(http://vignette3.wikia.nocookie.net/mvl/images/e/e9/Luffy-One-Piece.png/revision/latest?cb=20140221162732");
//luffy lachende kop
}); </script>
so what i wanna know is how to add my own picture.
The image path you use shouldn't be the actual path of the image on your computer, it should be the path that the specific html file you're in would use to get to the image.
Your link here is the problem:
'src=C:\Users\Eigenaar\Desktop\Nieuwe map\luffy'
For example, if I had a directory that contained:
index.html
img.jpg
index.html could display img.jpg using src='img.jpg'.
However, imagine I have a directory where index.html is on the same level as a directory called "images" which contains your image file, like this:
index.html
images
img.jpg
Then, in order to display the image I would use src='images/img.jpg'.
Most of the time, people have a folder with all of their website images in the same folder as their index.html file so they can pull directly from the folder.
Hope this helps!
Bonus learning note:
.. means "go up a directory". This is useful if you can't directly access the images folder from your html file. For example, if your directories looked like this:
html
index.html
images
img.jpg
You would first have to go up a directory before entering the images folder and displaying img.jpg. Then, your file path would be src='../images/img.jpg'.
I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.
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.