Occasionally you may notice that one or more images do not appear to be loading on a page in Canvas – especially pages that have a lot of images. Usually this is just a temporary issue and reloading the page fixes it.
Why does this happen?
How can I fix this issue?
First, make sure you are not using an old computer with insufficient memory/RAM or an out of date operating system or browser. Canvas will not work correctly with Internet Explorer, for example. Try the Chrome, Firefox, or Safari browser instead.
Make sure also you have a decent Internet connection. If you are trying to connect over a poor wifi or cellular signal, that may also cause the issue. Run a speed test to see how fast your Internet connection is.
You can also check the status of Canvas servers, but that is rarely the issue.
If images are not showing up in one course but they show up fine in others, it may be because you (or the course builder) copied and pasted images into the course rather than uploading images into the course. Copying and pasting images from one course to another does not work. The pasted images are still being loaded (or not loaded) from a different course that you may not have access to. Run the link validator in Canvas to check for and fix broken images and links.
If none of those are issues in your case, try one or more of the options below, starting with the first:
Option 1. Reload the page
If a simple reload of the page does not appear to be fixing the issue (control-R or command-R on macs), try control-shift-R (or command-shift-R on macs) to reload the page and force everything to re-download. Your browser keeps a cache (store) of images and files it has downloaded before. Control-shift-R should tell the browser to re-download everything.
That usually fixes the issue for me, but if things are still not working and you don’t think it is poor network connectivity, there are some “stronger” options below that you can try.
Option 2. Empty cache and hard reload
Sometimes it is necessary to empty that cache first to force all images or other files to be downloaded again.
In chrome, you can hit control-shift-i (or command-shift-i on macs) to open the developer console pane on the right. Then right-click (or control-click on macs) on the reload button and select Empty Cache and Hard Reload, as pictured below. Hit control-shift-i again to close the developer tools pane.
Option 3. Clear browser data
In Chrome, you can clear all the images and files stored by your browser. Click the 3 vertical dots on the top right of Chrome, go to Settings, and scroll to the bottom and click on Advanced. Click on Clear Browsing Data. You can also get there directly by going to this URL: chrome://settings/clearBrowserData
Clear recent images and files from your browser like so:
Reload the Canvas page to see if that fixes the issue.
See this Clear browsing data page for more details.
Option 4. Clear Chrome browser extension
Another option is to install the Clear Chrome browser extension for Chrome. It adds a button in the toolbar that will clear your cache any time you press the button (and optionally it will reload the page for you, too).
How can I lower the chance of this issue happening in my course?
I would recommend not using very large images in your Canvas pages, and not too many images. You might try to keep your individual images under 100kb and the total size of all images on your page under 1mb.
Try an image editor like Pixlr to resize your images to be smaller in file size (go to Image -> Image size to resize).