Отображение изображения в веб-части sharepoint для онлайн-ресурса sharepoint - PullRequest
0 голосов
/ 23 января 2020

Я пытаюсь создать свою собственную веб-часть галереи изображений для sharepoint. В настоящее время у меня есть изображение, показывающее на моем локальном сервере, но когда я смотрю на веб-часть на моем сайте sharepoint, она не появляется. Я внес изменения в файл 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, но не в sharepoint.
мое изображение появляется при просмотре веб-части с этого URL (локального) , но мое изображение НЕ появляется при просмотре веб-части с ЭТОГО URL (sharepoint)

1 Ответ

0 голосов
/ 24 января 2020

Мой результат теста в моей среде (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" />

enter image description here

enter image description here

...