Can't link local picture file to HTML on chromebook-CodePudding

I am trying to link a local image file to an HTML page. I am:

using a chromebook
my image file and HTML file are in the same folder
the folder resides inside the linux files directory

I traced the file path using the terminal. This is what I found was the path to my image file:

/home/jodyzupancic/scrimba_review_course/'Personal Website'/IMG-3052.jpg

Here is my HTML file with the path, which does not work. I am out of ideas here as to why.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Black Ops One&family=Creepster&family=La Belle Aurore&family=MedievalSharp&family=Orbitron&family=Rye&display=swap" rel="stylesheet">
        <script src="index.js"></script>
    </head>
    <body>
        <img src="/home/jodyzupancic/scrimba_review_course/'Personal Website'/IMG-3052.jpeg">
    </body>
</html>

CodePudding user response：

It is very unlikely that a directory name has single quotes in it. My guess is that the file path is actually:

/home/jodyzupancic/scrimba_review_course/Personal Website/IMG-3052.jpeg

If there are single quotes in that directory name, I would recommend renaming the directory so that it doesn't have them. I would also recommend renaming your personal website directory to remove the space. I would use either "personal_website" or "personal-website". Spaces in file and directory names are supported on Linux, but require special attention (like using quotes) when accessing them with command line tools.

A second problem is that you put a file path into the image source attribute rather than a file:// URL. If you are going to use the full path for the file, it should have a file:// prefix. So there should be three slashes: file:///home/...

If your HTML file and image are in the same folder, there is no need to use the full file path at all. You can use relative URLs. The following is much simpler and should work fine:

<img src="IMG-3052.jpeg">

Since you are using HTML5 and the file name has no spaces, you could even omit the quotes:

<img src=IMG-3052.jpeg>

It looks like you are taking a course on web development, and I don't want to get ahead of it, but at some point you should set up a local web server for development. Developing using file:// URLs doesn't work well anymore. Browsers have removed functionality from pages loaded from files as a security precaution. Setting up a local web server will work much better once you start using your own local scripts.