Question

我正在尝试为sharepoint创建自己的图像库Web部件。当前，我的本地服务器上显示了一个图像，但是当我查看共享点站点上的Web部件时，它没有出现。我对gulp文件进行了更改，以尝试正确解决此问题，但是我没有运气。

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>
    );
  }
}

几张图片显示了我在lova / dev env中工作的图像，但不在共享点中工作。
从this url (local)查看Web部件时出现我的图像，但是从THIS url (sharepoint)查看Web部件时我的图像没有出现 {{3}}

Answer 1

我在我的环境（SPFx 1.8.2，而不更改gulpfile.js）中的测试结果。

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

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

在共享点Web部件中显示图像以在线共享点

1 个答案: