[WordPress] Uploaded image is not showing! or showing as transparent field

This is one of the most common WordPress problems. Yet there is no tutorial that can describe all the cause and solution. Today I found another cause and solution, therefore I would like to share with other people who might get into this problem as well.

What is the problem ?

When we upload an image in Media Library or post, WordPress added a new item with a transparent field. This indicates that there is some problem with the image uploading process.

  • The database is working correctly, as a new item is added.
  • But the server is not working correctly since our image file is not properly uploaded. I checked via FTP and found that the new file is not uploaded into /uploads folder.

Solution 1: Chmod /uploads folder to 744, 755, or 777

The first solution can be found in WPBeginner article which showed as the first result when searching for “WordPress upload not working”.

In this case, your server permission is not set to allow uploading image. You have to connect into the server via FTP and change folder permission of /wp-content/uploads folder to 744, 755, or 777 (the last one is not recommended, but you might want to try if 744 and 755 do not work for you).

From WPBeginner article

However, I tried this first solution but it does not solve the problem for me. I continued to search and found this topic in WordPress.org mentioned talking about “upload_path” in “wp_options” in the database.

Solution 2 : Upload path in the database

*You probably need some help if you are not advanced user or developer*

You need access to control panel of your server. It is usually CPanel or DirectAdmin. Then you have to find a way to access PHPMyAdmin of your server. For example, in DirectAdmin it is located at MySQL Management > phpMyAdmin menu.

Inside PHPMyAdmin, go to xxx_options table (usually it is “wp_options”, but you might have set other prefix). Find a row with options_name = “upload_path”.

The “options_value” of this row should be blank as shown in the image above. In my case, it was something like “C:/MAMP/project/…” which is the culprit of why I could not upload the image.

After I changed this value to blank, I can upload images again.

I hope this tutorial will solve your problem as well. Because I knew how frustrated it is when we encounter a problem that we have to spend hours to solve.


Posted

in

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *