Question

第一次在这里发布，所以如果需要更多信息，请告诉我。我有一个React应用程序（用于创建react应用程序），它只是一个前端。我将其推送到azure应用程序服务，并且图像不会加载，但是控制台未显示有关原因的错误。图像在我的本地计算机上加载正常，再次出现的唯一错误是加载资源失败：net :: ERR_CONNECTION_REFUSED。 fontawesome-webfont.woff2 /：1。我不认为这是相关的，但我可能是错的。

到目前为止，我已经尝试根据某些google搜索的建议更改其他文件夹中图像的目录，例如将它们放在公共文件夹中。我尝试将不同的内容添加到网络配置中，例如删除扩展名和mimetype标签，并确保jsx文件中需要图片。我几乎可以在Google上找到任何东西。

以下是我的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',
      }
    }
  }]
},

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

1 个答案: