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.
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>
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 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'm going through the web development guide on the Mozilla Developer Network, and in the JS basics section, I came across this example:
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}
When I worked out this example, although it did execute as expected, I have a question about the image path. Here's my file structure:
My question is: when working with images in html, if the present .html file would be in a folder called pages, along side with other sibling folders as images, scripts, etc, the file structure I would have followed in this case to reach an image would be so: ../images/filename.jpg. The .. would be used to reach the main(root) folder from the pages folder, then access the images folder from there.
How does this image changer example work then, without the .. being used? The file here main.js is in a sub-folder of the root.
How does this image changer example work then, without the .. being
used?
It works because the js file doesn't live alone, it is included in an HTML file, and that HTML file happens to be in the root folder.
The JavaScript is adding the new image path to the <img> node on the html page. All it's doing is inserting some information onto the page, it doesn't know anything about images.
The browser sees that something on the DOM has changed, so it reads the new src attribute, downloads the image, and repaints.
As the path is written to the html page, it's relative to where that page is. It doesn't matter that JS inserted it.
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.