圖像GET使用Webpack和AngularJS在生產中拋出404錯誤

Question

我有這個難題，經過多次嘗試后無法解決：

我無法在生產中加載靜態圖像;

在開發（ npm run serve ）時一切都很好，即使從dist提供文件（ npm run serve：dist ）

版本

Webpack：3.12.0

file-loader：1.1.11

url-loader：1.1.2

AngularJS：1.6.9

開發時：

我的index.html包含這一行，webpack將不會加載

<base href="/"></base>

而我的AngularJS配置塊包含

$locationProvider.hashPrefix('');

我使用像http：// localhost：3000 /＃/ appName / listingComponent / users這樣的URL

我能夠像這樣使用ng-src （有時是動態綁定）來查看每個圖像

<img ng-src="app/images/image1.png">

文件夾結構是這樣的

ui/
├── conf/
│   ├── browsersync-dist.conf.js
│   ├── browsersync.conf.js
│   ├── gulp.conf.js
│   ├── webpack-dist.conf.js
│   └── webpack.conf.js
├── gulp_tasks/
│   ├── browsersync.js
│   ├── misc.js
│   └── webpack.js
├── node_modules/
├── src/
│   ├── app/
│   │   ├── config.js  //global variables
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── index.js
│   │   ├── index.less
│   │   ├── images/ <--
│   │   ├── actual_app_folders/
│   │   └── ...
├── gulpfile.js
└── package.json

在我的webpack-dist.js中，我有以下內容

module.exports = {
  module: {
    loaders: [
      {
        test: /\.json$/,
        loaders: [
          'json-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: [
          /node_modules/
        ],
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      },
      {
        test: /\.js$/,
        exclude: [
          /node_modules/
        ],
        loaders: [
          'eslint-loader'
        ],
        enforce: 'pre'
      },
      {
        test: /\.(css|less)$/,
        exclude: '/node_modules/roboto-fontface/',
        loaders: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize!less-loader!postcss-loader'
        })
      },
      {
        test: /\.html$/,
        loaders: [
          'html-loader'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/,
        loader: 'url-loader?name=[name].[ext]'
      }
    ]
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    FailPlugin,
    new HtmlWebpackPlugin({
      template: conf.path.src('/app/index.html'),
      inject: true,
      chunksSortMode: 'dependency'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendors', 'config'],
      minChunks: Infinity
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer]
      }
    })
  ],
  output: {
    path: conf.paths.dist,
    filename: function(output) {
      return output['chunk']['name'] === 'config' ? '[name].js' : '[name]-[hash].js';
    },
    chunkFilename: '[name]-[hash].js'
  },
  entry: {
    app: `./${conf.path.src('/app/index')}`,
    config: `./${conf.path.src('/app/config')}`,
    vendors: Object.keys(pkg.dependencies).concat(['webpack-material-design-icons'])
  }
};

在生產中

構建過程將/customer_company_name/our_company_name/前綴添加到路徑中，該路徑變為

http://<customer_domain>:<domain_port>/customer_company_name/our_company_name/#/appName/listingComponent/users

而文件夾結構是這樣的

our_company_name/
├── app/
│   ├── images/ <--
│   │   ├── image1.png
│   │   └── image2.png
├── app-<random_number>.js
├── config.js
├── favicon.ico
├── index.html
├── index-<random_number>.css
└── vendors.js

問題

現在，每次顯示圖片時，瀏覽器都會收到404錯誤

GET http://<customer_domain>:<domain_port>/app/images/image1.png 404 (Not Found)

而請求應該像這樣

GET http://<customer_domain>:<domain_port>/customer_company_name/our_company_name/index.js

像應用程序中的每個其他文件一樣。

我嘗試了什么

到目前為止，以下沒有任何幫助：

1. 在以下<base href="/customer_company_name/our_company_name/"></base>構建過程時更改基本標記（目前保留）
2. 明確要求圖片與index.js中的每個其他文件一起使用require('./images/ODM_trasp48px.png'); （目前保留）
3. 在webpack output.publicPath: '/customer_company_name/our_company_name/'使用publicPath output.publicPath: '/customer_company_name/our_company_name/'以及output.publicPath: '/'
4. 使用文件加載器而不是url-loader（目前保留）
5. 使用帶有options: { useRelativePath: true }文件加載器options: { useRelativePath: true }
6. 使用帶有options: { publicPath: /customer_company_name/our_company_name/ }文件加載器options: { publicPath: /customer_company_name/our_company_name/ }

你能幫我小伙子們嗎？

Answer 1

我認為問題不在於替換模式，因為它適用於其他文件類型，但事實上webpack不知道如何處理ng-src屬性。 我認為它默認只查看img的src屬性。 您可以將其更改為識別ng-src，如：

module.exports = {
  module: {
    loaders: [
    ...
    {
      test: /\.html$/,
      loaders: [ "html-loader?" + JSON.stringify({ attrs: ["img:src", "img:ng-src"] })]
    },
    ...
  ],
   ...

alt語法：

{
   test: /\.html$/,
   loaders: [ "html-loader?attrs=img:src img:ng-src" ]
}

在更改配置之前，您可以通過檢查替換當前是否正常用於具有普通靜態<img src =“...”/>的img標記來測試是否是這個原因。

Answer 2

您可以嘗試顯式導入圖像並將其傳遞給模板，而不是讓webpack解析模板。

然后，配置的image-loader或url-loader將處理導入的圖像。

靜態圖像

const myImage = require('./path/to/images/image1.png');

// In component declaration 
`<img ng-src="${myImage}">`

動態圖像

使用webpack的require.context

const pathToImages = require.context('./path/to/images', true);
const dynamicImageName = 'foo.jpg',

// In component declaration 
`<img ng-src="${pathToImages(dynamicImageName, true)}">`

Answer 3

你可以嘗試下面改變你的index.html

<base href="./"></base>

Answer 4

解決方案讓我們開始吧

output.publicPath: '/customer_company_name/our_company_name/'

這將作為解釋的正確利用改寫NG-/ src目錄路徑護理在這里 。

我們不需要html-loader來解析ng- / src，唯一需要的是始終使用ng-src，否則構建將不會成功。

最終，不需要<base>標記，並且每個路徑中的初始斜杠都不用於引用圖像。

我將更新這個答案，因為我改進了webpack-dist.conf.js /整個項目。

---

沒有給出答案，因此我會嘗試將它們組合起來，因為一些建議看起來合法。

最后，如果我無法解決這個問題，我將嘗試刪除生產路徑前綴/customer_company_name/our_company_name/ 。