Image upload broken on basic demo

[swyxio]

---

BUG REPORT INFORMATION

- Do you want to request a feature or report a bug?

Bug

- What is the current behavior?

in the deploy-to-netlify gatsby demo, just trying to upload and add an image to a post, it starts failing:

- If the current behavior is a bug, please provide the steps to reproduce.

as above. just try to insert any image into the default gatsby template

- What is the expected behavior?

it should insert the image smoothly.

- Please mention your CMS, node.js, and operating system version.

n/a

[pungggi]

same if using latest dist 1.0.2..

[tech4him1]

I can see the error, but when I save the page, the image then works. Can you please try and see if it works after saving?

We are working on fixing the issue where the image looks like it is broken.

[pungggi]

I think the problem here is that as long as the build is not done, the image does not exists.
In gatsby we usually have two folders for media

media_folder: static/media
public_folder: media

So, to provide a smoother experience this needs a solution:

• the cms could have a fallback url and pointing to raw.githubusercontent.com or whatever is used for the media library..if the first url, in the example media is missing

• other solutions?

[swyxio]

hello sorry i havent been watching this issue closely since i went to another cms solution. it seems like you know what is going on here so i'm glad to have pointed it out for fixing based on your priorities. ultimately this is not a high priority for me so feel free to close the issue (or continue without me). i was just excited about the JAMstack and wanted to try this out.

[tech4him1]

@pungggi Agreed. So once the build is done, it works, right?

Thanks @sw-yx

[pungggi]

@tech4him1 yes, if the image is uploaded the first time you insert in, in an entry..

[Strangehill]

Is this being addressed?
I've just encountered this issue. The picture seems to upload fine into the media library (the thumbnail displays properly there). The thumbnail also showed up fine in the image widget. It was only in the blog post preview that the image appeared broken.
Reading the comments here I started dreading I'd have to 'publish' in order to get a build, in order to confirm that the image would display properly in the blog post. What I didn't expect is that after a few minutes of procrastinating on pressing the 'publish' button, the image would actually appear properly in the preview pane. So, I guess there's a build happening every time I edit the blog post even if I don't press 'publish' ?
Anyway, just sharing this hoping a fix is on the way.

[erquhart]

When you upload an image, that commit will trigger a build. Normally a missing image will simply result in a 404 in the preview pane image, but maybe there's a custom preview template or widget that isn't handling the missing image so well.

[erquhart]

@Strangehill I've just tested this on a deployed fork of gatsby-starter-netlify-cms with no issues. This was also using version 1.2.2, which the Netlify CMS Gatsby plugin is currently stuck at.

Can you help us reproduce?

[Strangehill]

When you upload an image, that commit will trigger a build.
Got it.

I just tried this again and this happened:
After selecting 'choose an image', the media library shows broken thumbnails.
I try to 'upload new' but after selecting my picture, and seeing the button's text change to 'uploading...' , the text went back to 'upload new' and there was no evidence of my upload.
So I try to upload my picture again. This time it kinda works because now there's a broken thumbnail for my picture in the media library.
So back in the rich text editor, instead of a thumbnail in the image widget, or the picture in the preview pane, I see the missing image icon in both.
Once the build finishes the image shows up in the preview pane, but not in the widget. Then, maybe because I wait a little longer, or because I'm closing and opening the image widget, the thumbnail appears there too. I check the media library again and all pictures there are broken still.

[erquhart]

Can you link to a repo with this issue so we can clone and reproduce?

_{Sent with GitHawk}

[tech4him1]

@Strangehill Also, is the repo private in GitHub? And are you using Git Gateway?

[Strangehill]

Yes, it is private. And it's using the git gateway. I'll try reproducing in an otherwise configured repo.

[Strangehill]

I've just tried it on a public repo, default Gatsby starter, so also with Git Gateway.

The media library thumbnails work fine now, and the upload there of a new picture with its thumbnail too, so I select my the picture and then, back in the editor, the image widget shows a broken thumbnail in both the editor and the preview pane.

I close and open the widget in the seconds that follow but they don't change. I leave it alone for a couple minutes, and I try closing and opening the widget again, which then seems to make the images appear properly in both editor and pane.

https://vigorous-visvesvaraya-1f0175.netlify.com/
https://github.com/Strangehill/gatsby-starter-netlify-cms-18-02-13

EDIT: this starter I deployed in mid february, I've also just tried it with a starter deployed today and everything smoothly...
so I guess the question would be: what old settings is the february site stuck with and how do I update them?
the mid-February site is using Netlify CMS version 1.0.3 and the site I just deployed today without the issue is using Netlify CMS version 1.2.2. I'll update it and assume that'll fix that (I forgot for a moment it's up to me to update the cms since it's headless!)*

[erquhart]

Ah, right. Also note that the Gatsby plugin is setting the Netlify CMS version, so you'll need to override with resolutions in your package.json for further updates (CMS is currently at 1.3.5). A major release will be out soon for the plugin which will require Netlify CMS to be installed as a peer dependency instead.