Images not appearing in Story Maps

Cause

When using URLs to add images to Story Maps, the URLs must be directly to the image. With many popular image hosting services, images have a landing page that includes website headers, various sign-in buttons or sharing buttons, etc. in addition to the image itself.

These landing page URLs do not successfully provide an image to the application. Instead of the image, the user often sees: "Picture not available".

If using Dropbox as an image URL, try navigating to the URL in a browser. If the result is a prompt for a Dropbox login, then it is expected that this image would not show in Story Maps.

Applications (including Story Maps) require the raw URL of an image to successfully embed the image into the application.

Solution or Workaround

It is necessary to use the raw URL of the image itself (ending in .png, .jpg, .img, etc.). Often this can be fetched by pulling the URL from embedding code, or by dragging the image up to the top of some browsers to create a new tab with just the image. Some browsers also allow the user to right-click the image and choose "Open image in new tab" or "Open image in new window" or "Copy image URL". These may also provide the raw URL needed.

To confirm that the correct URL is being used, navigate to it in a new browser. Only the image should appear:

If the image URL requires a login to access the image, host the image on a different service or make the image public to allow the application to embed the image.