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

Question

第一次在这里发帖，如果需要更多信息，请告诉我。我有一个 react 应用程序(使用创建 react 应用程序)，它只是一个前端。我将其推送到 azure 应用程序服务，图像无法加载，但控制台没有显示任何错误说明原因。图像在我的本地计算机上加载良好，我看到的唯一错误是无法加载资源:net::ERR_CONNECTION_REFUSED。 fontawesome-webfont.woff2/:1。我不认为这是相关的，但我可能是错的。

到目前为止，我已经尝试按照一些谷歌搜索的建议更改其他文件夹中的图像目录，例如将它们放在公共(public)文件夹中。我尝试向网络配置添加不同的内容，例如删除扩展名和 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 片段

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: {},
                },
            ],
        }
    ]
 }

非常感谢任何帮助。

Answer 1

看起来 webpack.config 上缺少字体文件的加载程序。您可以尝试在 webpack.config 中添加此规则。不要忘记安装webpack file-loader lib .

// for fonts
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
  use: [{
    loader: 'url-loader',
    options: {
      fallback: {
        loader: 'file-loader',
      }
    }
  }]
},
// for images
{
  test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 4096,
      fallback: {
        loader: 'file-loader',
      }
    }
  }]
},