Images Not Showing Up in Canvas? Here’s What You Can Do

dholton
Community Participant
10
83941

In response to the Disappearing Graphics and related posts here, as well as related questions from my own faculty, here are some tips for what you might try doing if you run into a situation in which some or all of the images do not appear to load in Canvas.  Feel free to add your own suggestions, corrections, etc. in the comments below.

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.  In my experience (been using Canvas since 2011), this is just a temporary issue and reloading the page fixes it, and usually the cause is my school network, not the Canvas servers or my computer or browser.

Why does this happen?

There are various reasons why this may happen - your school or home network may be clogged or having other issues, Canvas servers are overloaded, your computer is overloaded, etc.  When you load a page from a web server like Canvas, your web browser may actually be making dozens of requests from the server - one for each image and CSS and javascript file used on the web page.  This puts a brief but potentially heavy load on your computer, your home or school network, and the Canvas servers.  For more discussion of this issue, see these threads on the Canvas community site: Disappearing Graphics and Why are my jpeg images disappearing.

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.

empty cache and reload browser

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 browsing data

Clear recent images and files from your browser like so:

clear browsing data and cached images

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 courses?

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 1 megabyte.

Try an image editor like Pixlr to resize your images to be smaller in file size (go to Image -> Image size to resize).

  

 (This was originally posted on our college circles of innovation blog.)

10 Comments
Bobby2
Community Champion

 @dholton ‌ you good thing. 

I'm sure that your great explanation and examples will come in handy for a lot of people. I found this to be particularly good advice. 

I would recommend not using very large images in your Canvas pages, and not too many images.

Thank you!

Shar
Community Champion

Hi Doug Holton ,

I love the Empty Cache and Hard Reload trick in Chrome. Is there something similar for Firefox or Safari?

Surprisingly (or not surprisingly) just yesterday a coworker when to a Canvas page I built and none of the images were loading for her, and we were trying to show a demo! But we kept going and then suddenly the images worked, actually I started navigating on her computer and then things worked. (I'm not saying that I'm magic, but I've had "computer stuff" work for me when it fails for the owner.) She did have lots of stuff going on, she was running Zoom and sharing her screen from her machine, so that symptom of too much going on with the computer memory was probably happening and it finally caught up by the time I started showing things.

Great tips here and thanks for sharing from your circles of innovation!
Cheers - Shar

dholton
Community Participant

It looks like control-shift-R works in Firefox, too, but I don't think there is an 'empty cache and hard reload' button like in Chrome.  Here's how to clear the cache in Firefox: How to clear the Firefox cache | Firefox Help 

In Safari, it depends on what version you are using, but apparently in the latest version, command-option-R does a force reload.

mmoore1
Community Contributor

Great Explanations.  Now I don't have to make it.  I can just send people this link!

evanp
Community Participant

In addition, please create or add onto an incident with Canvas...other schools are having this same issue, yet are served images reliably from every other site. 

acompton
Community Contributor

This is becoming a widespread problem on our campus, and it isn't just happening on campus. It is happening when people are working at home and from other locations, so it isn't network related. We've been told to clear cache, which works temporarily, but that is needed at least once a week to keep up with the missing images. We use Chrome and are using the updated version. Is anyone finding a better, more permanent fix? Instructure Support is telling us they can't replicate the issue, so we are not making headway there.

junyang8
Community Novice

Does clearing browser catch work or it is just a temporary solution? Doesn't look like folks need to do this for other LMS. I agree with Andrea Compton. There has to be a permanent fix for this. I have been getting complaints from faculty on this issue from time to time. 

dholton
Community Participant

I would just recommend doing some digging into the specific cases of this happening and try to see what might be the cause.  Was it a temporary issue of the school network being clogged or poor wifi connectivity?  People using old computers with little RAM or using old browsers?  Folks uploading very large image files to their courses that could/should be reduced in size?

dholton
Community Participant

But yes, perhaps there are some things Instructure/Canvas can do, too, like have an option to 'optimize' images when they are uploaded/displayed.  Or display a warning when a page is heavy with images, I don't know.  Or build in some kind of connectivity tester.  My Roku, for example, has a built-in internet tester it directs me to if it notices the video buffering too much.

kevin_hulen
Community Novice

I am seeing the same problem with my profile photo. Three times in the past month my profile photo has disappeared and returned automagically. I have been developing online content for a very long time, so I know all the debugging options and I'm saying this is a problem with the Canvas image servers or wherever these images are stored in the cloud. A 38kb tiny profile picture is going to load on a page if the text can load, unless there's an issue with the image loading from afar.

I hope Canvas recognizes this and puts out a fix.