Guide to Insert a Web Image Using the New Confluence Cloud Editor

[Jason Tolotta]

IMPORTANT: This DOES NOT apply to Confluence Server or to Confluence Cloud pages using the Legacy Editor.

The new Confluence Cloud editor does not have a GUI control or macro to insert web images
This causes issues when dynamic images are required and need to be updated by an external source outside of Confluence.

This has been described on the following Atlassian Jira issue and I would urge anyone that needs this feature to vote for it.

CONFCLOUD-65749 Ability to add Images from web in the new editor

There has been a lot of questions raised regarding this issue with no free solutions.
I wanted a definitive solution to exist on the Atlassian Community and so I prepared the following workaround:

1. Prepare the web image links using the following markdown format in a text editor outside of Confluence:

   ![ALT TEXT](https://link.to/image.jpg)

   IMPORTANT: Copy-and-pasting image links will auto-format on the page and so will preparing the markdown text directly on the page
   NOTE: The ALT TEXT must have a value or the image will not render

   The following is a working example using Lorem Picsum that can be copied to the page:

   ![Example](https://picsum.photos/id/237/200/300)

2. Edit a Confluence page
3. Copy and paste the markdown onto the page

4. Verify the image is displayed on the page

After adding the web image to page, it is also possible to add a link to it by mouse hovering over the image to display the floating controls and clicking the link icon to enter a Confluence page or URL.

It seems that there is no method to resize the image through markdown.
A partial workaround to reduce the size of images is to use the Layouts macro provided and create the web image inside.
The image will only grow to the height of the Layout macro.

Please reply to this if there are any more hints or tips (especially on the subject of image resizing).

Enjoy having web images on pages again.

[Roman Konovalov]

This is a great workaround, thank you!

[Stefan C.]

Clipboard content needs to come from plain-text editor (e.g. copy above from this web-site just pasts the pre-formatted info:

![ALT TEXT](https://link.to/image.jpg)

and not the image-markup.

In case you do not have plain/text editors (like notepad on windows) you can convert markup  to text/plain by pasting to the browser Address bar and copy it again.

Upcoming Confluence release may have a direct image-link functionality: https://jira.atlassian.com/browse/CONFCLOUD-65749

[Yatish Madhav]

Thanks for the post @Jason Tolotta  and the comments! This workaround helped!

[Scott Beeson]

Is this dynamic? Will it update if the image updates? Or is it retrieving and embedding a static image? 

[Scott Beeson]

Looks like this doesn't work for statically generated images at all. For instance, a github built status.