Displaying an image in a sharepoint web part for sharepoint online

Question

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.

gulpfile.js

'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) => {

    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 => !(["react", "react-dom"].includes(name))) 
    return generatedConfiguration;
    }
});
build.initialize(require('gulp'));

Demo.tsx:

export default class demo extends React.Component<IDemoProps, {}> {
  public render(): React.ReactElement<IDemoProps> {
    return (
      <div className={ styles.demo }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>

              <div className={ styles.imageGallery }>

              <span className={ styles.title }>Look at this Not Stupid Gallery!!</span>

              <div className={ styles.imageGalleryImages }>
                <img src={"/lib/webparts/demo/components/Images/Selfie4.jpg"} alt={"Selfie"}/>
                <p>MY PICTURE HERE!</p>
              </div>
              (..a lot of skipped, duplicated image divs)..
              <div className = { styles.title }>It knows you want a bigger view of a picture!</div>
              </div>
            </div>  
          </div>
        </div>
      </div>
    );
  }
}

A couple pictures showing my image working in the lova/dev env, but not in sharepoint.
my image appears when viewing the web part from this url (local) but then my image does NOT appear when viewing the web part from THIS url (sharepoint)

This is where i got the tutorial to add the if/else statement in the gulpfile.js blog.mastykarz.nl/… — KyleJohnston907

Lee_MSFT Lee_MSFT · Accepted Answer · 2020-01-24T06:50:33

My test result in my environment(SPFx 1.8.2, without changing gulpfile.js).

return (
      <div className={styles.reactSpFx}>

        <div className={styles.container}>
          Image Load
        <img src={require('../../assets/panda.jpg')} alt="test" />

Displaying an image in a sharepoint web part for sharepoint online

1 Answers