ReactJS图像未在azure应用程序服务中显示，但在本地显示

第一次在这里发布，所以如果需要更多信息，请告诉我。我有一个react应用程序（用于创建react应用程序），它只是一个前端。我将其推送到azure应用程序服务，图像将不会加载，但控制台没有显示原因错误。图像在我的本地计算机上加载正常，我看到的唯一错误是加载资源失败：net:：ERR\u CONNECTION\u拒绝。FontWebFont.woff2/：1。我认为这没有关系，但我可能错了

到目前为止，我已经尝试过按照一些谷歌搜索的建议更改其他文件夹中图像的目录，例如将它们放在公用文件夹中。我尝试过向web配置添加不同的内容，例如删除扩展名和mimetype标记，并确保jsx文件中需要图像。几乎所有我能在谷歌上找到的东西

下面是我的wepack配置和web配置的一个片段。如果还需要什么，请告诉我

<staticContent>
    <remove fileExtension=".eot" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <remove fileExtension=".ttf" />
    <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
<rewrite>
    <rules>
        <rule name="React Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
        </rule>
    </rules>
</rewrite>

---

非常感谢您的帮助。

在

webpack.config

上，您的字体文件似乎缺少加载程序。您可以尝试在

webpack.config

中添加此规则。别忘了安装

//用于字体
{
测试：/\（woff2？| eot | ttf | otf）（\？*）$/i，
使用：[{
加载器：“url加载器”，
选项：{
回退：{
加载器：“文件加载器”，
}
}
}]
},
//用于图像
{
测试：/\（png | jpe？g | gif | webp）（\？*）$/，
使用：[{
加载器：“url加载器”，
选项：{
限额：4096，
回退：{
加载器：“文件加载器”，
}
}
}]
}，

如果您尝试直接在浏览器中打开url并查看“开发人员工具”网络部分，您会得到什么？在“网络”选项卡上，除了我看到控制台中关于woff和woff2字体失败的相同错误外，其他内容都在加载。其他一切，包括我的标志图像是200状态。如果我能提供任何其他信息，请告诉我，谢谢。非常感谢，因为这修复了我看到的控制台错误。但是，这些映像仍然没有加载到服务器上。但再次感谢您的帮助，非常感谢。您还需要为图像添加规则。我已经编辑了我的答案，并为他们添加了一条规则。非常感谢你的帮助。现在正在加载图像，但我必须向加载程序添加一个内容。这将是下面的加载器：“url加载器？name=app/images/[name].[ext]”，它能够解决这个问题。再次感谢所有的帮助！

module.exports = {
    mode: 'production',
    entry: path.resolve(__dirname),
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    resolve: {
        extensions: ['.js','.jsx','.*']
    },
    devServer: {
        historyApiFallback: true
    },
 module: {
    rules: [
        {
            test: /\.jsx?/,
            loader:'babel-loader'},
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {},
                },
            ],
        }
    ]
 }