Canvas @ YaleInstructor Guides FAQStudents reported that an image didn't load in a quiz question. Why did this happen and how can I avoid it?

Students reported that an image didn't load in a quiz question. Why did this happen and how can I avoid it?

Students will sometimes report to instructors or the ITS Help Desk, that while taking an exam on Canvas using the Canvas Quiz tool, an image embedded in a question has failed to load. The failure of the image to load causes a major impact in the student's ability to interpret and answer the question in a fair and equitable manner.

The following article will endeavor to provide scope and context for this issue as well as potential solutions that instructors can take ahead of their assessments using Canvas Quizzes, as well as troubleshooting solutions students can take in the moment.

Scope of Issue

Thus far, in Classic Quizzes, the issue resides that some students report that they can not view an image (or multiple images) in a quiz while other students can view the same respected images. This has been isolated to Classic Quizzes, though we cannot confirm that New Quizzes does not suffer from the same issue.

This issue has been reported from students using a wide range of computers, browsers, smartphone devices, tablets and Canvas app versions. There does not appear to be any detectable pattern that provides a clear and cogent explanation for why some students experience an issue and others don't when taking a quiz item with comparable attempts.

Potential Causes for Broken / Missing Images

There are, unfortunately, a multitude of causes that could result in an image embedded in a Canvas quiz question to not load or appear broken. Some of the most common causes are:

  • Copied content from one course to another can bring images that are stored and point back at a Canvas site students do not have access to. When previewing a quiz item, faculty will not notice the images are potentially broken or missing to students as they already have access to the previous course's content.
  • Insufficient bandwidth on either Canvas servers, internet connection, and / or personal computer processing can cause images not to load as it takes dozens of request between the computer and the servers hosting Canvas / image to load. Images that are larger in storage size and thus take longer to load when bandwidth may be low can also attribute to the image not loading
  • Browser extensions that misinterpret Canvas media content, such as images, and prevents them from loading.
  • Students using out-of-date or unsupported browsers, or older versions of the Canvas for Students app.

Potential Instructor Solutions / Troubleshooting

Option 1: Check Image Storage Location & Permissions

Instructors can use the Validate Links checker in their Canvas course to see a report of links / images that may cause an issue in the class because they are pointing to other Canvas courses that students may not have access to.

Likewise, images that are stored and referenced in the current course's "Files" section may have their permissions set to unpublished or restricted to within a time frame outside of the testing period for students.

Option 2: Reducing Image File Size

Keeping individual image file sizes low (under 100kb per image) can help avoid issues of server, internet, or computer bandwidth breaking or stopping images from loading.

Potential Student Solutions / Troubleshooting

Option 1: Update or Change Browser / Device

If possible, students can attempt to either update their browser or Canvas app to its latest version if out of date, try a different browser all together, or try a different device.

Devices like smartphones and tablets may have less processing power than their laptop or desktop counterparts. Less processing power means the browser or app may not load an image (or images) in favor of loading the rest of the page content.

Option 2: Reload the Page

When using a browser on a laptop / desktop students can attempt to reload the page by clicking the refresh button in their browser, or else using the keyboard shortcut "control-R" for PCs or "command-R" on macs.

An alternative form of reloading the quiz page is to use the keyboard shortcut "control-shift-R" (or "command-shift-R" for macs) to force a "Hard Reload," which forces the browser to re-download everything on the page. Since the browser stores information like images in its cache, using this more full reload can help the browser re-download all the information on the page and hopefully display the missing images.

Option 3: Empty Cache and Hard Reload

It may be necessary to clear the browser's cache (PC Instructions | Mac Instructions) prior to using the "Hard Reload" method mentioned above, or even just normal reloading.

On the Chrome browser, students can use the keyboard shortcut "control-shift-i" ("command-shift-i" on Macs) to open the developer console panel for Chrome. With the developer panel open, they can right-click (or control-click for Macs) on the reload button for the browser, which will open a menu where they can select to "Empty Cache and Hard Reload." Emptying the cache deletes any saved data (like images) that the browser might have tried to store, and forces a new complete download of the page to display.

Close the developer panel by using the keyboard shortcut again, or clicking the "X" button in the panel.

Option 4: Use an incognito Window

Students can try to open the quiz using an incognito window of their browser, which will disable any plug-ins or extensions that may cause an issue with the images loading for them.

If you have any questions or need additional help, please contact [email protected].