图像不在生产版本中显示，仅在开发中显示（webpack/sass-loader）

Question

在 webpack 开发服务器上运行我的应用程序时，我的所有图像文件都在工作，无论是作为 index.html 中的 img 标签还是 background-image: url()..

尽管在生产版本中运行我的项目，但我收到了无法找到的文件引用错误。

GET file:///img/featured.png net::ERR_FILE_NOT_FOUND
GET file:///img/header-img1-1.jpg net::ERR_FILE_NOT_FOUND

我添加了 copy webpack 插件，因为我认为这会将所有图像从我的 src/img 文件夹移动到我在 dist 中的 img 文件夹。

我应该为 webpack-dev-server 使用 contentBase 选项吗？或者 copy-webpack-plugin 没有得到正确的引用？超级糊涂

项目树：

- webpack.config.js
- package.json
- .babelrc
- src
  - js
    - index.js
    - ...
  - img
    - ALL IMAGES LOCATED HERE
  - scss
    - layout
      - landing.scss
      - brands.scss 
    - base
  - index.html

我用过的landing.scss里面

background: url('~/img/img-title.png')

与brand.scss等其他文件相同

background: url('~/img/img-title.png')

这一切都很好，我想我已经对如何使用 webpack/sass 加载器引用图像感到困惑，并且似乎无法弄清楚如何让图像路径同时适用于开发/生产，我只能似乎一次让一个工作。

生产树：

- dist
  - css
  - img
  - js
  - index.html

webpack.config.js：

GET file:///img/featured.png net::ERR_FILE_NOT_FOUND
GET file:///img/header-img1-1.jpg net::ERR_FILE_NOT_FOUND

Answer 1

我认为您在生产中使用的文件夹结构与本地不同，即在本地，它只是http://localhost:PORT/app，但在 prod 上，它必须类似于http://produrl/Some_Folder/app

现在来到实际问题 - 这是您的 CSS 加载器。

默认情况下css-loader具有url=true，导致所有 URL 都相对于根进行映射。因此这对你有用 -

background: url('~/img/img-title.png')

但这并没有

background: url('../../img/img-title.png')

只需设置url=false，您就可以提供相对 URL，它会正确加载所有环境。