CODEWITHSUNDEEP
reactjsazureazure-web-app-service
drumurr
drumurr

Reputation: 33

ReactJS images not showing in azure app service, but do show locally

First time posting here, so if more information is needed let me know. I have a react app(used create react app) that is just a front end. I pushed it to azure app service and the images won't load, but the console shows no errors as to why. The images load fine on my local machine and again the only error I see is Failed to load resource: net::ERR_CONNECTION_REFUSED. fontawesome-webfont.woff2/:1. I don't think that is related, but I could be wrong.

So far I have tried changing the directory of the images in other folders as suggested from some google searches such as place them in the public folder.I have tried adding different things to the web config such as removing extensions and mimetype tags, and making sure images have required in the the jsx files. Pretty much anything I can find on google.

Below is a snippet of my wepack config and web config. If anything else is needed please let me know. 

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

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

Any help is greatly appreciated.

Upvotes: 1

Views: 941

Answers (1)

aquilesb
aquilesb

Reputation: 2272

Looks like it is missing a loader for your fonts files on webpack.config. You may try to add this rule in the webpack.config. Don't forget to install 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',
      }
    }
  }]
},

Upvotes: 1

Related Questions