inline background-image URL is messed up by phantomJS in the index.html

[chrisvfritz]

inline background-image URL is messed up by phantomJS in the index.html

[drewlustro]

This plugin takes the html that comes straight out of PhantomJS. We have no control over what PhantomJS outputs.

Solution

Use prerender-spa-plugin's postProcessHtml option to transform what you need.

In your webpack.config.js:

var Path = require('path')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
  entry: [ './src/main.js' ],
  output: {
    path: './dist',
    filename: '[name].js'
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'src/static',
      to: '.'
    }]),
    new PrerenderSpaPlugin(
      Path.join(__dirname, 'dist'),
      [ '/' ],
      {
        postProcessHtml: function (context) {
          return context.html.replace(
            /http:\/\/localhost:8080/gi, ''
          )
        }
      }
    )
  ]
}

[vasiliysmirnov]

Hey, @PierreCavalet, have the same issue, did you solve the problem?

[PierreCavalet]

Hey @vasiliysmirnov, sadly I did not. I worked that around and I now don't have inlined background-image anymore.

This problem is weird because PhantomJS was not designed to prerender SPA at the first place so it is not technically a PhantomJS problem, but it is not a prerender-spa-plugin problem either because the URL prefix is placed by PhantomJS. If you find a more elegant way to remove it than postProcessHtml, please let me know.