title: Trying to use react-image-gallery and I get "could not load the image" error even though the file path is definitely correct
body: <p>I'm trying to learn React but frankly it's quite disheartening that I can't even get third-party libraries to work. I have the following code in my App.js:</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import ReactDOM from 'react-dom';
  import ImageGallery from 'react-image-gallery';
  
  const images = [
    {
    original: 'images\Doodle1.png',
    thumbnail: 'images\Doodle1=thumb.png'
    },
    {
      original: 'images\Doodle2.png',
      thumbnail: 'images\doodle2-thumb.png'
    },
    {
      original: 'images\Doodle3.png',
      thumbnail: 'images\Doodle3-thumb.png'
    },
    {
      original: 'images\Doodle4.png',
      thumbnail: 'images\Doodle4-thumb.png'
    },
    {
      original: 'images\Doodle5.png',
      thumbnail: 'images\Doodle5-thumb.png'
    }
  ];
  
  class Art extends React.Component {
    render() {
      return &lt;ImageGallery items={images} /&gt;;
    }
  }
  
  function App() {
    return (
      ReactDOM.render(&lt;Art /&gt;, document.getElementById("root"))
    );
  }
  
  
  
  
  
  export default App;
  </code></pre>
  
  <p>Furthermore, when I try to render the image in the "Gallery" div on my index.html, I get the error that it is not a DOM node, when it most certainly is. However, the main problem I want to solve is why the images are not showing. For my App.css, I have only this line at the minute:</p>
  
  <pre><code>@import "~react-image-gallery/styles/css/image-gallery.css";
  </code></pre>
  
  <p>If anyone can shed some light on the situation, I'd be massively grateful, as I feel like I'm bashing my head off a brick wall at the minute.</p>