'The image #1 could not be loaded' error

In a blog post I wish to have an image which, on a mouse click displays a larger version of the image. All standard stuff so far. The issue is that when I click on the smaller image an error appears in the modal image viewer instead of the larger image. The error is ‘The image #1 could not be loaded’, however if I click the ‘>’ (next image) arrow it loads the correct image at the correct size.
I have tried the following:

I have followed the tutorial about using Modal Image to the letter with Modal Image switched on and off on the specific image settings.

I have also tried with General Modal Image switched on and off in the theme settings.

This is a recent installation (Saturday) of the latest version of WordPress and I am only running the theme plugins.

The image that is supposed to load on click is the same image that is displayed smaller in the post. The URL for the image was populated automatically when I selected Media File and is correct.

With any combination of the two Modal Image options I get the same result ‘The image #1 could not be loaded’. It seems as though the theme is trying to load another image before the one that I specified but it can’t be found.

During the weekend I searched the forum for this error and it seems that a number of users are experiencing it. So far I haven’t been able to find one that includes a solution. Being able to add an image that can be enlarged within a page or post seems to be one of the most primary requirements of any theme so I am hoping someone will be able to help me with a solution.

Many thanks.

Havine seen your two other replies I am now anticipating being told that I shouldn’t be using Visual Composer.

I would really appreciate a ‘How to – Create a blog post using tagDiv composer.

Many thanks,

Hi Simon, can you help why my site can not load the modal image? https://dev.ruangpengusaha.com/cara-mudah-memperpendek-url-dengan-bit-ly-hanya-pakai-hp/

Thanks