How to Back Up and Restore HTML Content in Moodle LMS Without Breaking Images

Have you ever restored backed-up HTML content in Moodle LMS only to find broken image links later? You're not alone. This common frustration happens when content is pasted back into the Moodle LMS editor after being saved elsewhere, like in Notepad. At first, it looks fine. Then, days later, your course images vanish.

This article explains why it happens, how Moodle LMS handles embedded images, and how to safely back up and restore HTML content without breaking anything. Plus, you'll learn a reliable workaround that keeps your course materials fully intact.

Why Image Links Break When Restoring HTML in Moodle LMS

When you insert an image into a Moodle LMS course, the system generates a temporary file URL for that image. You can tell because the URL contains /draft/ as part of the URL. These URLs are only valid for a limited time and are tied to the current session or user context.

If you copy the HTML (with those temporary URLs) into a plain text editor like Notepad or VS Code and later paste it back into Moodle LMS, the image links may still work - at first. But once Moodle LMS performs its routine cleanup process, those old URLs expire, and the images disappear. What remains are broken links and missing visuals on your site or in your course content.

Problem Scenario: Why HTML Backups Can Fail

Here’s a common workflow that leads to broken image links:

1. You open the HTML view in the Moodle LMS editor.
2. You copy the HTML and save it in a text/code editor like Notepad or VS Code for backup.
3. You make changes in the Moodle LMS editor and save.
4. Later, you decide to restore your original HTML.
5. You paste the old HTML back into the editor and save.
6. Everything looks fine - initially.
7. After some time, the images break because the URLs are no longer valid.

This can be confusing. What seemed to work yesterday no longer works today. Because people forget what they did, they might jump to the conclusion that Moodle LMS is malfunctioning, when in fact, it's functioning exactly as intended.

What’s Actually Happening Behind the Scenes

Moodle LMS treats images and files as secure, session-based resources. Each time you edit a page containing images in a TinyMCE or Atto WYSIWYG editor, it re-generates unique, temporary URLs for each image. These URLs grant access based on your login session and expire after some time or during system cleanup.

Visual Example of URL changes

Here's what happens to image URLs during editing sessions:

First Edit Session:

https://example.com/draftfile.php/5/user/draft/268163159/image.png

Second Edit Session:

https://example.com/draftfile.php/5/user/draft/620103399/image.png

Notice the bold portion, right after /draft/, changes, making the previous URL invalid.

The images may appear to work for a while at first. But eventually, they become inaccessible when Moodle performs its clean-up maintenance, and that’s when your images vanish.

How to Back Up HTML Without Breaking Image Links

To properly restore backed-up content and prevent broken image links in Moodle LMS:

✅ Pro Tip: Consider downloading the original image files and re-uploading them when restoring or migrating content. This ensures complete control and reliability. If you are working with a more complex layout and wish to replace an image, try uploading the new image to a different part of the page and then moving the URL into place in the HTML editor view. Note: This issue does not affect images that were pasted into the editor, as these become Base64 embedded images that lack a URL.

Solution 1: Update Image URLs

Step-by-Step Workaround

1. Open the current HTML view of your course page in Moodle LMS.
2. Compare the image URLs in your backup HTML with those in the current editor.
3. Update the image URLs in your backup to match the current, valid URLs.
4. Paste the updated HTML into the Moodle LMS editor.
5. Save your changes.

By doing this, you're ensuring that the restored content uses fresh, valid URLs that Moodle LMS can serve correctly.

Solution 2: Re-Upload Images

This approach is more reliable for extensive content restoration:

Consider downloading the actual image files and re-uploading them when restoring or migrating content. This ensures full control and reliability. If you are dealing with a more complex layout and want to replace an image, consider uploading the image to a different part of the page and then moving the URL into place in the HTML editor view.

Note: This issue does not affect images that were pasted into the editor, as these become Base64 embedded images that have no URL.

1. Download and save all original images from your content
2. Restore your HTML content to Moodle
3. Delete the broken image links in the editor
4. Re-upload the saved images
5. Position them as needed in your content

Troubleshooting Already Broken Images

1. Identify broken images:
   • Look for image placeholders or broken image icons in your content.
   • Check the HTML view for image URLs containing /draft/ followed by numbers.
2. Fix through re-uploading:
   • For each broken image, delete the image placeholder.
   • Re-upload the original image file.
   • Position as needed.

If you have a recent course backup, you can consider restoring just the affected sections to regain access to your images.

Important Note for Course Migration

This issue also affects copying HTML from one Moodle LMS course to another. Since image URLs are tied to the original course's file permissions and structure, they often won’t work in the new course unless the images are re-uploaded or the URLs are updated.

Why Moodle LMS Handles Image URLs This Way

This behaviour is a built-in security feature. Moodle LMS uses temporary file URLs to:

• Prevent unauthorized access to course files.
• Ensure users only see content they are permitted to access.
• Protect sensitive course material and student privacy.

For example, if you copy an image URL from a Moodle LMS course and try to open it in a private browser or while logged out, the image will not load - by design.

Final Thoughts: Keep Your Content Safe and Functional

Backing up HTML from Moodle LMS is a smart habit, but restoring it requires care. If you paste old HTML that includes expired image URLs, your course content may break without warning. Understanding how Moodle LMS manages images allows you to:

• Prevent broken image links.
• Maintain a consistent course experience.
• Safely move or restore content without hassle.

Hope you find this information helpful.

Michael Milete