Netlify cms custom preview showing a blank image

Netlify CMS
, ,
1

Good morning,

I’m trying to set up a custom preview on my netlify CMS site. When I create the custom component, everything renders correctly except the images. Theres a space for them, but its just white. If you inspect the elements, it has a path for the image, and when you hover it, looks like it’s just a generic gray block image, not the one I uploaded. Any tips on what I’m doing wrong?

Here’s the preview component

<script>
  var BuildingPreview = createClass({
    render: function() {
      var entry = this.props.entry;
      var image = entry.getIn(['data', 'image']);
      var bg = this.props.getAsset(image);
      return h('div', {"className": "product-hero"},
        h('h1', {}, entry.getIn(['data', 'title'])),
        h('img', {src: bg.toString()}),
        h('div', {"className": "text"}, this.props.widgetFor('description'))
      );
    }
  });

  CMS.registerPreviewTemplate("storage-building", BuildingPreview);
</script>

here’s the repo if you need to look at the code repo

2

How about simply setting image as a src?
h('img', {src: image})

3

Then it removes the space for the image and in the inspector, it just renders a blank image tag

4

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!