Black Lives Matter. Please consider donating to Black Girls Code today.

Adding image to a Plotly.js chart within a React component

I am having trouble adding background images to a plotly chart within a react component.

Consider this example from (second example on the page). When I try to replicate it within a react app I get the expected result except for the embedded image in the background:

The js logo above is not part of the plot - I’ve just added it to show that the image renders when outside of plotly.

Here is my app with two components (‘Plot’ and ‘App’):

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Plot />
      </div>
    );
  }
}

Plot.js

class Plot extends React.Component {
  drawPlot = () => {
    Plotly.plot('plot', [{
      x: [1, 2, 3],
      y: [1, 2, 3]
    }], {
    images: [
        {
          "source": "https://images.plot.ly/language-icons/api-home/js-logo.png",
          "xref": "x",
          "yref": "y",
          "x": 1.5,
          "y": 2,
          "sizex": 1,
          "sizey": 1,
          "xanchor": "right",
          "yanchor": "bottom"
        }
      ]
    });
  }

  componentDidMount() {
    this.drawPlot();
  }

  render() {
    return (
      <div>
        <img src="https://images.plot.ly/language-icons/api-home/js-logo.png"/>
        <div id="plot"></div>
      </div>
    );
  }
}

It seems that this is not the correct way to supply the image path in this situation but I’m struggling to understand why (and how to supply it correctly). Can someone help me understand this behavior?

Strange. Here’s how your data/layout look in a standalone page: https://codepen.io/etpinard/pen/YrRzYR?editors=0010

Would you mind sharing more of your code to help us debug?