Images not displaying in some browsers

I have a book whereby the images are not displaying in some browsers; specifically, firefox and safari. The issue it seems is that some of the images were uploaded directly into the part/chapter but the others were uploaded in the media library first. i downloaded one of the images and re-uploaded from the media library and changed the image in the chapter and it worked.

  1. Why is this issue happening?
  2. I have to download each image from the media library and re-upload it to make sure it uploads to the media library first. Is there a way to bulk download and hereafter, bulk replace the images in the chapters? If there is a way through HTML code that works too…

Any help would be appreciated…

Hi @Rahil_Kakkad I’ve never heard of anything like this happening before. In order for someone to provide suggestions or ideas for troubleshooting, could you do one of the following:

  1. provide a public link to the book you’re having trouble with, ideally with a chapter where things are working and one where things aren’t?
  2. provide a set of steps that someone might be able to follow to replicate this issue in another book?

Hi @SteelWagstaff
Here is a link of the book for which images are not displaying in Safari/Firefox: Acknowledgements – Active Learning

The same problem was occurring in this book which I fixed:
https://opentextbooks.concordia.ca/oerbydiscipline2/front-matter/about-this-guide/

I fixed the error by reuploading the images straight to the Media Library. Then, I went to each chapter and part and used the replace image option to insert the reuploaded images from the media library. This fixed the problem and all images are visible for this book in all browsers.

The issue with doing this procedure for the first book is that there are multiple images for which we dont have the original source. Now, its a tedious process of downloading all the photos from the book and reuploading them to the media library. These original photos are in the media library but they were uploaded in the chapter itself and I believe that this is the reason behind the problem. Now, I have to download them from the media library (and I can only do this for one image at a time) and then do the same process as before.

hi @Rahil_Kakkad thanks for the link – that was super helpful. So here’s what I see when I try to load the page in Firefox and then open the inspector console:


The Content-Security-Policy error is the one to pay attention to. It’s basically saying that it can’t open/load the image. The reason why is that this page is using an insecure http:// URL for the image instead of the expected, secure https:// path. This results in what’s called a ‘Mixed Content’ page: Mixed content - Security on the web | MDN. As the reference doc indicates, “To fix this type of error, all requests to HTTP content should be removed and replaced with content served over HTTPS.”

I’m not sure why the images are using an http:// path when uploaded in this way on your network. It doesn’t happen for networks that we host. As you’re on a self-hosted (open source Pressbooks network), I would recommend checking in with your network manager or whomever is running your Pressbooks network to see whether they can help you adjust your network settings or configuration to ensure that images are always uploaded/loaded using a secure (https) connection. If they’re unable to find/fix this problem at the server or network level, you could try using the Search/Replace utility to replace all occurrences of http://opentextbooks.concordia.ca with https://opentextbooks.concordia.ca throughout your book?

1 Like

Thank you so much! I’ll talk to the network manager and try the fix.

1 Like