Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I followed the guide here and I've done some Googling to no avail. Would someone mind pointing out the embarrassing blunder in my implementation here?
<!doctype html>
<html>
<body>
<img src="bonsai_tree.jpg" alt="tree" width="511" height="482">
</body>
</html>
The image is in the same directory as the html and I've triple-checked the name. I get a broken link image box when I render the page.
Thanks, and if I'm not following the proper question-asking protocol, please let me know! First-timer here...
EDIT: For what it's worth, I'm using a school-provided appliance running Linux. I don't believe this should be a problem, though I suppose I could be wrong.
Ive been there before :-)
Usually the syntax you have is correct is the picture is in the same file, just double check the spelling.
Here's a link to a fully detailed way on how to get a picture showing on your web page :
http://www.w3schools.com/html/html_images.asp
Good luck!
Open up the page, and then View Source on the html in the browser. Find the link to the image and click it- the error that it gives will tell you the problem.
It sounds like it's most likely permissions. Check the file permissions on the image file. It sounds like they're too low for you to view the file in the browser. I believe you need 604 permissions for it to be able to be used.
In a Linux terminal in that folder, run chmod 604 bonsai_tree.jpg to set the permissions correctly.
Bring up the image correctly in another tab in your browser.
Then go to the tab with your HTML, right click on the broken image, select "View Image". Compare the bad URL of this tab with the good URL of the other tab and your problem will be obvious.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 days ago.
Improve this question
So I have made this website, with two pages. Both pages, and links to both pages work perfectly well in both Safari and Chrome, in my local host. But for some reason the both menu items, linking to an 'About' page and on the second page, there is a link to 'Home', don't work in my GitHub deploy link. Shared here: https://hajmub.github.io/sounds/
I get this error message (linked above) when I click onto the 'About' page, in the deploy link.
Yet it seem to still be fine in my local host, on both browsers. Does anyone know what's going on?
Can it be something wrong with the code, if it seems to be working fine in the local server?
Have tried everything! Looked at markup indentation, all css properties, checking every aspect to make sure that the menu items markup and css were exactly the same across both pages - as... if the properties and markup are the same as yesterday's (when they were working) what's changed? Why don't they work now?
Your link is wrong in this element.
About
The leading / indicates a path starting from the web root, but your site is not in the web root, so the link fails. (On your own server the site is in the web root, so it works)
Change the link to this:
About
Note: no /. This links to a page relative to the current page. It should work on both servers.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
First off, the first question asked on here, so apologies for anything I get wrong.
Secondly, I have checked countless times for answers both on stacked and off. Before explaining the issue, I have tried capitalizing the JPG but it still shows the picture when it's typed in lowercase jpg on my local server when in google-chrome index.html file is running. I have also tried removing the ../ from the src attribute, though it doesn't display images on either github pages or from my local server, it displays the image on my local server when the ../ is used.
Display from running google-chrome index.html from the terminal
Display from github pages
What could be the issue/ solution to displaying the image on GitHub pages? I have given it a few hours to see if it loads in and nothing by the way.
This is the snippet of code of VSCode.
Thanks!
EDIT/UPDATE: SO, the issue was as simple as I was not uploading the images to the GitHub repo. Effectively when I was trying to load an image on my html document, the src was searching for an image file that simply wasn't there (Was only on my local machine at this point, once I committed/pushed the images file to the GitHub repo the issue was resolved.. Right under my nose.
Mental note: Check the remote repo for what files it currently contains to prevent future headaches as this one.
Thanks for the help though!
If you're trying to say that your image doesn't load it's mostly because the code can't locate the file, go to the folder where the image is located, drag the image to open a new chrome or safari page and when that is complete copy the link that pops up into the src in your html.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I've recently uploaded a website, and I'm having issues with images displaying:
Some of my images won't load and return a 503: service unavailable error.
In fact, I think the only images that load are the ones saved in cache memory, because if I refresh the page 3-4 times all the images get loaded.
I tried to contact my host, but they only responded I had low speed problems (Google tools tell me I should absolutely resize my images) and I'm not sure 4 images, even if they are big, cause too much trouble to get uploaded, am I wrong?
For further details, here is for example a page that bugs:
http://cookeup.fr/articles/sucr%C3%A9/Cookies+extra+moelleux+%28option+brownies%29
It appears as though anything that has c9users.io in the url such as http://cookeup-arthurdeschamps23.c9users.io/imagesArticles/Jennifer/2nd%20step.jpg is getting redirected for login details. Which can be replicated by simply attempting to visit that URL.
For the images that work, such as the title: http://cookeup.fr/Frontend/images/title.jpg you can see that these are not being redirected. I assume that there will be a redirect in the .htaccess for the website.
To get around this the easy way, I would try and put the images which aren't working in the same directory as the title.
As for the image size issue, I always compress everything with https://tinypng.com/ .
Definitely try resizing your images. Even if it doesn't fix your issue, it will assist in the loading time of your website. Additionally, try re-uploading your images and check how they are linked on your site.
Most of the time, a 503 error occurs because the server is
too busy or
there's maintenance being performed on it.
You might want to compress or resize your images before uploading it to server , as they might be large enough to keep the server busy and show the error.
Moreover , check for the Relative URL of the images ,(not necessary) but helps sometimes.
This question was already asked before, nevertheless the solution that was suggested didn't solved the problem.
I am trying to include the ResearchGate academicon in my website, nevertheless it is displayed as a square in Google Chrome and as square with numbers inside in Firefox, while loading the website from the server.
If I download all the files to my computer (as a zip and then opening directly the html file) it displays correctly.
The previous question that was asked with the exactly same problem (and overall situation, it actually uses the same template for the website as I do) is here with its discussion is here Font-awesome: An emoticon looks different on my computer than on the actual webpage
I already tried doing the suggested modifications in the .htaccess file without success. Does anyone of you have an idea on how to attack this problem?
Many thanks!
Edit 1:
I include here the mime types reported by my CPanel:
Mime Types in CPanel
Edit 2:
Sorry, I don't have enough reputation to post the pictures, but they are identical to the quoted previous Question (linked: Font-awesone: An emoticon looks...).
Is it even in the correct size (maybe it is very small)? When not: Check font-awesome.com .. it has set some classes with allows you to size your icons. Try this class on your html in the <i> tag: fa-x3
I´ve made the same on this page in the footer.
Don't kill me if I am totally wrong for what you are searching.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have been working on a very simple thing for a while now, everything looks and works just fine when I just view the file locally. I used dreamweaver and dreamweavers preview works just as well in both firefox, IE and chrome.
My home0.png is supposed to change to home1.png when on mouseover and that's happening when viewed locally.
I uploaded all the files to a temporary host, and all is working except for the mouseover function. On mouseover is shows an error image.
I have split the image above in three parts;
The above part is what is doing live, when hosted
The middle parts is what is is supposed to do and what is is doing in DW preview and when viewed locally on my pc.
The third part is the code I used.
Can anyone spot the fault?
If your file structure is something like:
-views
-index.html
-file2.html
....
-IMG
-HOME0.png
-HOME1.png
you must add / to your img path:
/IMG/HOMEx.png
TIP: Set better the name of files and folders to lowercase.
Try to change this part
onmouseover="this.src='IMG/HOME1.PNG'"
to this:
onmouseover="this.src='IMG/HOME1.png'"
Just change .png from uppercase to lowercase