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.
Related
I am using the following code to display the image on my website:
<img src="/logo.jpg" alt="Image1">
The image is on my hard drive. However, the image is not displayed.
I have searched all over the internet and check the folder and path to be correct. The image is in the same folder as my HTML file.
I tried to upload the image in google drive and google photos and provide the HTML link however still I could not be able to display the image in both Chrome and IE.
Can anyone explain what can be the solution?
Is your image stored in the OS root directory?
If it's in the same folder as the html file then you want to remove the / at the beginning (or change it to ./)
/[filename] means file at the root of the OS/server (analogous to C:/ in Windows)
./[filename] means file in the current working directory (as does just [filename])
../[filename] means file in the parent directory
I've made an HTML page which I have to send off which looks perfectly fine, I have zipped a folder with all my files in, but when I unzip it and open the page back up, some pictures are out of place and it looks like the page has zoomed out, any ideas why?
My guess is that you are not unzipping all the files in the zip and hence when you open the html file the css is not loading with it.
Unzip all the files to a folder - don't just open the zip file. Make sure they are all in the same directory structure as before (if any). Then open the html.
If that doesn't work, post the zip so we can see what gives.
I'm creating a small website for university. I'm totally new in web dev and got a problem i can't find the answer for. I was searching similar topics for some good time now but i cant the solution.
It´s important to note, that i access this website with localhost:8080/index for example. So the website is not "online". To start the site i have to go inside the folder and cmd -> npm start
We also use Handlebars (if this is somehow important), so pretty much every file is .hbs
My problem is
<img src="index.jpg" alt="index">
is just not working. It only displays the alt "index" on the page. When i use an global img url (like from wikipedia) its showing me the image. But not when i use "own" images. I was trying diffrent pictures, diffrent names, diffrent locations for the picture but it won't load.
When i use the inspector inside Firefox or Chrome it tells me img don't load(this is translated from germany, i don't know what it tells in english)
impressum.hbs and the picture are inside the same folder
I was copying the picture into every folder but still, it won't load.
You may also doublecheck that the pic is .jpg and not .jpeg, which happens sometimes.
So your index.html and your picture are in the same exact folder?
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder
The solution was an "internal" Problem. The univeristy gives us a framework and somehow you only can access pictures when they are saved inside 1 special folder. So it´s solved. Still i dont understand why they dont tell us this information directly...
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.
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.