title: How to do Dynamic images in ReactJS?
body: <p>In my system I have a few images that a user can have presented and it's extremely advantageous to me to be able to just pass in an id and then have that image be presented to the user.</p>
  
  <p>(One use case: Articles in the system have images associated with them, there are many articles in the system, it'd be ideal to pull out just the image-id and have the image dynamically displayed based upon that id. There is no realistic possible way I can statically give an image path for each article.)</p>
  
  <p>Unfortunately I've tried to figure this out and haven't gotten far at all. I'd be super-duper appreciative of a "Explain it to me like I am 5" answer on this one.</p>
  
  <p>I have been trying to use images in two different ways and <em>both</em> have unfortunately not worked at all for me. Where unfortunately I am going to need both to continue :(</p>
  
  <p>1: Putting it as a background of a div. [I am using it as a carousel with overlaying text here.]</p>
  
  <p>2: Putting it as just a standalone image. [This is going to make up the 95%+ case of image use through the webapp.]</p>
  
  <p>I'd love to in a perfect world just pass in an object like this to props.</p>
  
  <pre><code>  articleDetails = {
          articleId: 38387,
          articleTitle: "Magical Unicorn Article"
          articleContent: "I am not that creative, but here is some content."
      }
  
  
         &lt;IndividualArticle article={articleDetails}/&gt;
  </code></pre>
  
  <p>Then for props to take this in and convert it into the image path to my local files.</p>
  
  <pre><code>   templateStringForImage = `../../../../articleImages/${this.props.article.articleId}.png`
  </code></pre>
  
  <p>Then for this template string to be used as:</p>
  
  <p>1: the background image of a div</p>
  
  <pre><code>    &lt;div
           className="container"
           style={{
               backgroundImage: `url(${templateStringForImage})`         ,                       
               height: "576px"          
      }} 
  enter code here
  
   &lt;/div&gt;
  </code></pre>
  
  <p>2: standalone image</p>
  
  <pre><code>      &lt;Image
              src={require({templateStringForImage})}
        /&gt;
  </code></pre>
  
  <p><strong>Some of the things I've tried:</strong></p>
  
  <p>I've tried a few changes like changing the code around to be like:</p>
  
  <pre><code>     var Background = `../../../images/articleImages/${         
                this.props.article.image     
       }`; 
  </code></pre>
  
  <p>​</p>
  
  <pre><code>     &lt;div style={{                
               backgroundImage: url('../../../images/articleImages/article3Image.png'),                                
                height: "576px"          
       }} 
  </code></pre>
  
  <p>But unfortunately that only gave me these errors.</p>
  
  <pre><code> Line 32:  'url' is not defined  no-undef
  </code></pre>
  
  <p>Also when I went to try and use the new Background object like this I got a different error</p>
  
  <pre><code>             var Background = `../../../images/articleImages/${         
                     this.props.article.image     
              }`; 
  
            &lt;Image
                 src={require({Background})}
            /&gt;
  </code></pre>
  
  <p>The error was:</p>
  
  <pre><code>         Error: Cannot find module '[object Object]'
  </code></pre>
  
  <p><strong>My current system/errors:</strong></p>
  
  <p>-I have a bunch of images like article1Image.png, article2Image.png, article3Image.png specified in the src code in an image folder.</p>
  
  <p>-I want to pass "article1Image.png" into the object directly and have an image produced.</p>
  
  <p>-I tried to do something like this and it has consistently failed, I don't even get an error message when I attempt to use it as a backgroundImage on a div unfortunately... it's literally just blank space on my screen. No broken image icon, just a void.</p>
  
  <pre><code>   var Background = `'../../../images/articleImages/${
           this.props.article.image
      }'`;
  
      &lt;div
      style={{
        backgroundImage: `url(${Background})`,
        height: "576px"
      }}
  </code></pre>
  
  <p>-When attempting to use semantic-ui's Image I am also running into a nasty error</p>
  
  <pre><code>      &lt;Image
          src={require(Background)}
        /&gt;
  </code></pre>
  
  <p>Error: </p>
  
  <pre><code> Error: Cannot find module ''../../../images/articleImages/article2Image.png''
  </code></pre>
  
  <p>Yet shockingly enough THIS works, when I give it as a static string like this.</p>
  
  <pre><code>      &lt;Image
          src={require('../../../images/articleImages/article2Image.png')}
        /&gt;
  </code></pre>
  
  <p>But even when I give the string path directly into the backgroundImage of the div it still appears empty...</p>
  
  <pre><code>      &lt;div
             style={{
                 backgroundImage: `url(../../../images/articleImages/article3Image.png)`,
                 height: "576px"
           }}
  </code></pre>
  
  <p>Thanks all I truly appreciate the help lots and lots!</p>