SharePoint Framework с загрузкой изображений компонентов React - PullRequest
Новая
       10

SharePoint Framework с загрузкой изображений компонентов React

0 голосов
/ 14 ноября 2018

У меня есть изображение в той же папке, что и мой компонент React:

enter image description here

Я пытаюсь сделать это: 

<img src="require('./incident-report-graphic.jpg')"alt="test" />

Я получаю значок разбитого изображения:

enter image description here

В своем gulpfile.js я добавил в локальный путь материал: 

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/";
        }
        return generatedConfiguration;
    },    
});

Я не знаю, что я делаю неправильно.

EDIT:

Я просто замечаю, что получаю ошибку: 

GET https://myOrg.sharepoint.com/sites/sbx/mySite/_layouts/15/require('/assets/incident-report-graphic.jpg') 404

РЕДАКТИРОВАТЬ 2: Я попробовал предложение Мэтта и изменить свой код на: 

<img src={require('./assets/incident-report-graphic.jpg')}alt="test" />

Я получил ошибку: 

YellowCardForm.tsx:177 Uncaught (in promise) Error: Cannot find module "./assets/incident-report-graphic.jpg"

РЕДАКТИРОВАТЬ 3:

enter image description here

1 Ответ

0 голосов
/ 16 ноября 2018

Разрешено в комментариях.Было две проблемы:

  1. Код JSX: 

    <img src="require('./incident-report-graphic.jpg')"alt="test" />

    передавал буквальную строку "require('./incident-report-graphic.jpg')" в качестве пути к изображению.Вместо этого вызов require должен быть оценен как выражение, а его возвращаемое значение передано как путь к изображению: 

    <img src={require('./incident-report-graphic.jpg')}alt="test" />
  2. Путь к изображению ./assets/incident-report-graphic.jpg был неверным.Правильный относительный путь ../../assets/incident-report-graphic.jpg.Можно было бы использовать абсолютный путь, но я не преследовал его.
...