带有 React 组件加载图像的 SharePoint 框架

Question

我在 React 组件所在的文件夹中有一张图片：

我正在尝试渲染它：

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

我得到损坏的图像图标：

在我的 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;
    },    
});

我不知道我做错了什么。

编辑：

我刚刚注意到我遇到了一个错误：

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

编辑 2：我尝试了 Matt 的建议并将我的代码更改为：

<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：

Answer 1

已在评论中解决。有两个问题：

JSX代码：
```
<img src="require('./incident-report-graphic.jpg')"alt="test" />
```
将文字字符串 "require('./incident-report-graphic.jpg')" 作为图像路径传递。相反，需要将 require 调用作为表达式进行评估，并将其 return 值作为图像路径传递：
```
<img src={require('./incident-report-graphic.jpg')}alt="test" />
```
图像 ./assets/incident-report-graphic.jpg 的路径不正确。正确的相对路径是../../assets/incident-report-graphic.jpg。绝对路径或许可以，但我没有追求。

带有 React 组件加载图像的 SharePoint 框架

SharePoint Framework with React Component loading images

javascript

typescript

reactjs

spfx