How to debug an HTML page on mobile?

Html page w/ pictures?

  • Playing around with learning html. Am trying to view sample pages from my computer to see how they turn out in a browser. I understand how this is supposed to work (save html file, open browser, click "file" and "open file" in the browser, and then select the html file you created). I got this to work for text for a page I created, but I can't get it to work for images that are saved to my computer. Here is my test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml… <html> <head> <title>Test Page</title> </head> <body> <img src="plant.jpg"/> </body> </html> I have a image saved to my computer as plant.jpg . My understanding was that if you have an image saved on your computer and you write the code above then the image should appear when you open this webpage in your browser. But it isn't - its just a blank page when I open it. I double check the spelling, so I know it's spelled correctly. I don't think I am making a coding mistake because when I set the image source as the online location of the image (http://scholarlyexchange.org/ojs/public/journals/114/homepageImage_en_US.jpg), then the image DOES show up when I open the page on a browser. My question is, what am I doing wrong for the plant.jpg version of the code? I realize I could upload all the images I wanted to use to the internet (flickr or something) and then use the internet image source, but I don't want to have to do that. Does the plant.jpg have to be saved in some special location for it to work? or do I have to include more information inside the quotation marks for the image source beyond the file name plant.jpg?

  • Answer:

    Everyone is telling you wrong!. You must create a folder for all your site files so you have all files with the correct relationship. Then your relative paths will all be correct for your site anywhere. Even if you transfer all files under the one site folder to a flash drive. The folder would be used as the root directory just as the public_html is used as the root directory on an actual hosting site. You can then drag/drop your web files into a browser and have them work. Don't have to use File Menu and browse unless you want to. Never use paths that refer to your hard drive if files are to be used online or your computer is being used as a server. All files have to maintain the correct relationship between each other for paths to work. HTML file and image in same folder: <img style="width: XXpx; height: YYpx; border: 0;" src="plant.jpg" alt="Text Description"> HTML file in root folder and image in different folder: <img style="width: XXpx; height: YYpx; border: 0;" src="images/plant.jpg" alt="Text Description"> HTML file and image file in different folders: <img style="width: XXpx; height: YYpx; border: 0;" src="../images/plant.jpg" alt="Text Description"> <img style="width: XXpx; height: YYpx; border: 0;" src="/images/plant.jpg" alt="Text Description"> Use " ../ " as many times to tell how far back in directory to send browser to find image. Ron

kelpman at Yahoo! Answers Visit the source

Was this solution helpful to you?

Other answers

If plant.jpg isn't in the same directory as the page it's supposed to be on, you have to give the path to it on your computer. That might be something like "C:/myimagedirectory/plant.jpg" or, if it's in a subdirectory of the directory the html file is in it would be "subdirectoryname/plant.jpg".

Jerry H

when you use the above HTML, 'plant.jpg' has to be in the same folder as the HTML file. if it's not, you have to tell the browser where the picture is located on your computer. So if it's on your desktop, you could use: <img src="file:///C:/Users/ACCOUNT NAME/Desktop/plant.jpg"/>

cory1996

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.