I would like to create an HTML file with image references which come form a zip file. The HTML file is for consumption on disk i.e., not through a internet server app like IIS or Apache. The intent is to open the html file with Word.
So for example a file test.html would contain a reference like:
<img src="test.zip/images/myimg.jpg" alt="Title" height="500" width="300">
The test.zip file would be in the same folder as test.html.
Any idea if something like this is possible? (BTW, I know how to do this with an (uncompressed) images folder)
No, is the short answer.
You have to extract this in order to read it.
You have to keep in mind that the orginal image is nothing like the zipped image.
Related
code:
Why am I not able to see any image here to open amazon?
NOTE: image is saved as th.jfif on my desktop and not in any folder
was expecting to see the image
The issue you are having is very likely due to your image not being in the correct location from where your img is expecting it to be.
I would say take the image from your desktop and place it in a folder, maybe called site. Then put your HTML file and image file in the same site folder and load your page again. Then your path mapping should be accurate and your image will render.
I say it is your path mapping because rendering your HTML link using an online image works just fine.
<img src="https://turnerduckworth.com/sites/default/files/styles/case_study_single_image_s_2x/public/2019-03/5_Amazon_Lettermark_2560.jpg?h=a92f03cd&itok=2nBmNv14" alt="website" width="100">
Surely this is to do with having no file or folder structure. Your image and web page must be detailed relatively to each other.
<img src=" path to the image from the web page location ">
If your web page has a folder with it called images and inside it are all your.... images.
The path will be
src="images/picture-title.jpg"
Read about file structure. To begin with, put your web page inside a folder of it's own and also in that folder create an images folder.
I suspect the path does not match the location of the image you saved. the whole tutorial is on here .
for the example, you saved your image in path images , so you should should type it like this:
<img src="/images/th.jfif.jpeg">
and don't forget to write down the image file extension clearly. hope its help
I'm a student studying a Certificate in Web Development.
I've written a webpage in HTML which contains 2 images which are displaying fine however when I copy the folder containing the files into a ZIP file (so I can email it) the images no longer show when the webpage is opened from the ZIP file. The code for displaying the image is:
<img src="logo.jpg" height="150" alt="Logo for Club Palmy"/>
And the image is definitely in the folder I've copied and pasted into the ZIP file
Why won't it work?
Yes it won't work because what really happens when you open something directly from a zip is that it extracts that "specific" file to a temporary location first and then opens the extracted file.
Winrar extracts the archives to
C:\Users\\AppData\Local\Temp (Windows)
by default.
So what really is happening is that your html document exists but your images don't exist in the same directory i.e. the path mentioned above.
What you should do?
Extract all the files and not try opening them directly from the zip.
I'm new to HTML and I had a question about accessing files with pictures.
I know that, to access the pictures that are within other folders, the code looks something like what is shown below and my HTML file would be right before the pictures file:
<img src="pictures/mountain.jpg" alt="mountain"/>
My question is: how do I access pictures that are placed in files that are outside of my HTML file? How do I link a picture but backwards through a file that is the file that holds these files?
Do you mean going up a folder?
<img src="../pictures/mountain.jpg" alt="mountain"/>
Also, if you wanted to go up an additional folder you would do this:
<img src="../../pictures/mountain.jpg" alt="mountain"/>
The files you want to refer to in a html file, being images or other html files or JavaScript files, must be within the root of your server. So if the root of your server is c:\users\httpserver and you want to link to an image in c:\users\kristy\pictures\mountain.jpg, the answer is that it is not possible, you will need to copy the file to a Directory within c:\users\httpserver and link it either relatively, as ketchupisred showed or absolutely.
i.e if the html-file is located in c:\users\httpserver\html and the picture is c:\users\httpserver\pictures\mountain.jpg, either
<img src="/pictures/mountain.jpg" alt="mountain"/>
note the starting / that refers to the root of the server or
<img src="../pictures/mountain.jpg" alt="mountain"/>
the .. taking you one Level up before going into the pictures folder
Since going up one or two folders has already been explained, I'll just add that if you want to access a file in the root directory you can do this:
<img src="/pictures/mountain.jpg" alt="mountain"/>
I have some PDF's sitting in a folder on my computer, is there a way to write a link to open them on to a webpage?
The main idea is when the site goes live the link will be used to download the pdfs from the folder, but obviously at a later stage the folder will be a temp folder on my website.
So at the moment i just want to open the pdfs from a link, and the final goal will be to have the links download them.
Can any one help me?
This is the file path to get to the pdf i want to link to.
C:\Users\Shaun\Documents\FormValue\CS1.pdf
How would i create the link?
If you want to have a link to a PDF, you just have to put the relative path to the file in the href attribute of an a tag. So let's say you had a folder called pdfs, with the file boom.pdf inside it, and folder called site sitting beside it, with the file site.html in it. Then all you'd have to do is put this link in the html file:
Link to a pdf
In most (all?) browsers now a days, that will open the PDF in a new tab. To download it you would right-click it and do the Save Link As thing. Just need to get the path in href right.
UPDATE
If you want to use the full path to the file, you need to prefix it with file://. Then you just put it in the href the same as with a regular link, ending up with something like:
Link to a pdf
This should work with your set up, but if the pdf and the html files are stored near each other, relative URLs are still a good option. A little bit of Google work should show you how to write those.
For each PDF just do what I talk about here.
<object height="950" data="sample-report.pdf" type="application/pdf" width="860">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="sample-report.pdf">click here to
download the PDF file.</a>
</p>
</object>
It works with most browsers and it degrades nicely.
It sounds like youre asking if you can put a link on a web site to a PDF sitting on your computer. You can't. The files have to be either on another web site or on your site's server.
If you are using ASP.NET, you can have the link point to a handler that accepts a query string identifying the file, either by file name or a hash of the file. Then the handler can look in the folder for a file that matches the pattern, read the file as a byte array, and then write those bytes to HttpResponse.
Whats going wrong with my explorer or mozilla. I used the
<img src="path"/>
but the pic cannot be seen, when i open my html file. It just opens an empty box at that place.How do i make it through? I cannot display my pictures in my html file.Could you tell me which version of explorer supports it?
Make sure that your file is really named how you think it is. If you have "Hide known extensions" enabled, disable it and check again. Also, check if the extension in the path is the same case as the files. I once had a problem where images would not display in IE because of the image extensions being in upper case.
where is your HTML file and where is your image file ?
lets suppose your HTML file is anywhere and your image is in the same directory then you can give it path src="image.extension".
better you should check it in the same directory. Thanks
Make sure your path is correct.
If the image is in the same folder as your html file, then it should just be
<img src="image_name.jpg" />
If you reference your images from another folder, you will need to place the proper path in there. Depending on the file structure, it could be something like
<img src="/images/image_name.jpg" />
<img src="../images/image_name.jpg" />
<img src="../../images/image_name.jpg" />
Also check that you have
spelled the file and folder names correctly
used the right upper- and lowercase letters (this can be problem for file name extensions, like .jpg vs .JPG)
actually saved the file in the place it is supposed to be