title: Creating React component that extends img tag
body: <p>I'm trying to create a React component that renders an image from a remote location. I want it to inherit whatever props were passed such as alt, style, className, etc. I don't know what these props are ahead of time.</p>
  
  <p>I managed to write it like this, but I have the issues described below:</p>
  
  <pre><code>import React, { Component } from "react";
  import PropTypes from "prop-types";
  
  class BackendImage extends Component {
    render() {
      const remoteImageURL = process.env.REACT_APP_BACKEND_URL + this.props.backendImagePath;
      return &lt;img {...this.props} src={remoteImageURL} /&gt;;
    }
  }
  
  export default BackendImage;
  
  BackendImage.propTypes = {
    backendImagePath: PropTypes.string,
  };
  </code></pre>
  
  <p>The first issue is that I'm passing the prop backendImagePath down to img that does not recognize it, thus throwing the warning <em>React does not recognize the <code>backendImagePath</code> prop on a DOM element</em>.</p>
  
  <p>The second issue is another warning that <em>img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.</em></p>
  
  <p>Is my approach the best one? If so, how do I fix these warnings?</p>
  
  <p>Thanks</p>