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.
In a modern browser (I use Firefox), I opened the network tab in the developer tools.
I reloaded a localhost instance (
and the live website instance.
I compared the requested paths.
On the broken images, they indicated 403 errors.
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”.
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
sudo chmod u=rw,g=r,o=r mi1.jpeg
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