Fixing Some Broken Images


I noticed recently that some of the images in this site were broken, that is, they didn’t show up. Before I push the updates to live, I always make sure that everything is looking the way I want them to.

However, just because it works on the local instance doesn’t mean it would work well in live.

Good thing that I make it a habbit to put alternative texts to all images in the site, so that’s what I was seeing instead.

After investigating and asking around1, I found that the problem was due to file permissions.

Troubleshooting

In a modern browser (I use Firefox), I opened the network tab in the developer tools. I reloaded a localhost instance (localhost:1313 using hugo server2), and the live website instance. I compared the requested paths.

On the broken images, they indicated 403 errors.

HTTP 403

HTTP 403 status code means “access forbidden”. With “forbidden” being the operative word, we can infer that the file exists in the server, it’s just that the server won’t serve the file to you because you’re not allowed to it. It’s different from HTTP status 404, which means “file not found”.

File Permissions

According to some folks I asked in the internet, this 403 errors is usually caused by access permission problems on ther server.

In my case, some of the files (images) that I pushed live to server were owned only by my user account in my local machine. The server “respected” this, and, in effect, didn’t display these images.

Changing File Permissions3

To view permissions of all files in a folder, type ls -la in the terminal. Broken images would look like the following:

-rw------- oqo oqo 44486 Feb  2  2021  mi1.jpeg

Make them viewable by using chmod:

sudo chmod u=rw,g=r,o=r mi1.jpeg

or

sudo chmod 644 mi1.jpeg

They are the same.

The ending result, with file permissions changed, would be:

-rw-r--r-- oqo oqo 44486 Feb  2  2021  mi1.jpeg

  1. Many thanks to /u/pm-me-your-nenen and /u/diMario on Reddit for taking the time to answer my questions. ↩︎

  2. I use Hugo as my static site generator. ↩︎

  3. More details in this tutorial here↩︎



Back to Index :: Log :: Projects