You can add images to an Electronic Lab Notebook (ELN) in two main ways:

1. Attach as a file – Upload the image so it appears as an attachment.

2. Embed in the document – Paste the image so it appears directly in your ELN entry.

This guide focuses on embedding images.

Method 1: Copy and Paste from Your Computer (Recommended)

Best for: Preserving the exact file format and quality.

Steps:

1. Download the image to your computer.

2. Open your file browser (Finder on macOS, File Explorer on Windows).

3. Right-click the image file and select Copy

   • or use CTRL + C (Windows) / CMD + C (macOS).

4. In your ELN, click where you want the image to appear.

5. Right-click and select Paste

   • or use CTRL + V (Windows) / CMD + V (macOS).

Tip: This method avoids any format conversions that can happen when copying from a browser.

Method 2: Copy and Paste from a Browser

Best for: Quickly adding images from a webpage.

Steps:

1. Find the image in your browser.

2. Right-click the image and select Copy Image.

3. Paste into your ELN as described above.

Note: Most browsers (especially Chrome-based ones) will convert the image to PNG format before pasting. If you need the original format, use Method 1.

Method 3: Copy HTML Content (Websites or Other Apps)

Best for: Copying both text and images from a webpage, Word document, or other application.

Steps:

1. Highlight the content you want to copy (text and images).

2. Right-click and select Copy.

3. Paste into your ELN.

Common Errors and Fixes

Case 1 — Image blocked by CSP

If only the image-src directive is enabled, images may display temporarily but remain linked to the external URL. If the source image is deleted, it will disappear from your ELN. In this case, you may also see errors such as:

<insert example image of an error after an image is pasted with image-src directive but no connect-src directive>

For administrators:

• Allow images from the source domain by adding both:

  • image-src directive

  • connect-src directive

• Go to Admin Console → Allowed External Hosts to configure.

Case 2 — External site blocks image download

Even with the correct CSP settings, some sources use CORS restrictions to prevent downloading.

Best workaround for users: Download the image to your computer and paste it using Method 1.

Best Practice Summary

• For reliable results – Always use Method 1 (from your computer).

• To avoid broken links – Ensure images are embedded, not just linked.

• Admins – Configure both image-src and connect-src directives when allowing external images.