title: Displaying an image in a sharepoint web part for sharepoint online
body: <p>I'm trying to create my own image gallery web part for sharepoint. 
  Currently, i have an image showing on my local server, but when i look at the web part on my sharepoint site, it does not appear. I have made changes to the gulp file to try to correctly address this, however i have had no luck. </p>
  
  <p>gulpfile.js</p>
  
  <pre><code>'use strict';
  
  const gulp = require('gulp');
  const build = require('@microsoft/sp-build-web');
  
  build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
  
  build.configureWebpack.mergeConfig({
      additionalConfiguration: (generatedConfiguration) =&gt; {
  
      if (build.getConfig().production) {
          var basePath = build.writeManifests.taskConfig.cdnBasePath;
           if (!basePath.endsWith('/')) {
                 basePath += '/';
           }
           generatedConfiguration.output.publicPath = basePath;
       }
      else {
            generatedConfiguration.output.publicPath = "/dist/";
        }   
      generatedConfiguration.externals = generatedConfiguration.externals.filter(name =&gt; !(["react", "react-dom"].includes(name))) 
      return generatedConfiguration;
      }
  });
  build.initialize(require('gulp'));
  </code></pre>
  
  <p>Demo.tsx:</p>
  
  <pre><code>export default class demo extends React.Component&lt;IDemoProps, {}&gt; {
    public render(): React.ReactElement&lt;IDemoProps&gt; {
      return (
        &lt;div className={ styles.demo }&gt;
          &lt;div className={ styles.container }&gt;
            &lt;div className={ styles.row }&gt;
              &lt;div className={ styles.column }&gt;
  
                &lt;div className={ styles.imageGallery }&gt;
  
                &lt;span className={ styles.title }&gt;Look at this Not Stupid Gallery!!&lt;/span&gt;
  
                &lt;div className={ styles.imageGalleryImages }&gt;
                  &lt;img src={"/lib/webparts/demo/components/Images/Selfie4.jpg"} alt={"Selfie"}/&gt;
                  &lt;p&gt;MY PICTURE HERE!&lt;/p&gt;
                &lt;/div&gt;
                (..a lot of skipped, duplicated image divs)..
                &lt;div className = { styles.title }&gt;It knows you want a bigger view of a picture!&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>A couple pictures showing my image working in the lova/dev env, but not in sharepoint.<br>
  my image appears when viewing the web part from <a href="https://i.stack.imgur.com/MSx0L.png" rel="nofollow noreferrer">this url (local)</a> but then my image does NOT appear when viewing the web part from 
  <a href="https://i.stack.imgur.com/pjy3T.png" rel="nofollow noreferrer">THIS url (sharepoint)</a></p>