Javascript 在生产构建中不显示图像，仅在dev（webpack/sass加载程序）中显示

在webpack dev服务器上运行我的应用程序时，所有我的图像文件都在工作，无论是作为我的index.html中的img标记还是作为背景图像：url（）

虽然在生产构建中运行我的项目，但我得到了找不到的文件引用错误

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

我添加了复制网页包插件，因为我认为这会将所有图像从我的src/img文件夹移动到dist中的img文件夹

我应该为webpack dev服务器使用contentBase选项吗？或者复制网页包插件没有获得正确的引用？极度困惑

项目树：

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

内部着陆.scss 我用过

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

在其他文件（如brands.scss）中也是如此

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

这一切都很好，我想我已经把自己弄糊涂了，不知道如何使用webpack/sass loader引用图像，似乎无法解决如何使图像路径同时适用于开发/生产，我似乎一次只能让一个图像路径工作

生产树：

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

webpack.config.js:

const path=require（'path'）；
const autoprefixer=require（'autoprefixer'）；
const ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
const extractPlugin=新的ExtractTextPlugin({
文件名：“css/main.css”
});
const HtmlWebpackPlugin=require（'html-webpack-plugin'）；
const ScriptExtPlugin=require（'script-ext-html-webpack-plugin'）；
const CleanWebpackPlugin=require（'clean-webpack-plugin'）；
const CopyWebpackPlugin=require（'copy-webpack-plugin'）；
module.exports=（env）=>{
const isProduction=env.production==true
返回{
条目：'./src/js/index.js'，
输出：{
path:path.resolve（uu dirname，'dist'），
文件名：“js/bundle.js”，
},
模块：{
规则：[
{
测试：/\.js$/,，
包括：path.resolve（uu dirname，'src'），
使用：'babel loader'
},
{
测试：/\.css$\.scss$/,，
包括：path.resolve（uu dirname，'src'），
用法：extractPlugin.extract（{
回退：“样式加载器”，
使用：[
{loader:'css loader'，选项：{importLoaders:2，sourceMap:true}，
{loader:'postsss loader'，选项：{sourceMap:true，插件：（）=>[autoprefixer]}，
{loader:'sass loader'，选项：{sourceMap:true}，
],
}) 
},
{
测试：/\.html$/,，
用法：['html-loader']
},
{
测试：/\（jpe？g | png | gif）$/，
使用：[
{
加载器：“url加载器”，
选项：{
限额：1000，
名称：“img/[name].[ext]”，
}
}
]
}
]
},
插件：[
提取插件，
新的HtmlWebpackPlugin（{
文件名：“index.html”，
是的，
模板：'./src/index.html'
}),
新ScriptExtPlugin({
defaultAttribute:'异步'
}),
新的CleanWebPackagePlugin（['dist']），
新的CopyWebpackPlugin([
{from:'src/img'，to:'img'}
]), 
]
}
}

嘿，我认为你的问题在于如何在SCS中引用图像

根据您的文件夹结构，它应该是：

---

background:url（'../../img/img title.png'）

我认为您在生产上使用的文件夹结构与本地不同，即在本地，它只是，但在产品上，它必须类似于

现在进入实际问题-这是您的CSS加载器

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

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

但事实并非如此

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

---

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

虽然接受的答案可能适用于您的特定场景，但我认为有一个更好的解决方案，不需要禁用

css加载程序
url（）
在大多数情况下，处理和将工作得更好

瓷砖
~
问题
当您使用
~
导入css中的某些内容时，
css加载程序将在节点模块内搜索该文件。您的图像位于src/img文件夹中，因此您不需要使用tilde
~
来导入图像

url（）
问题
如果它们不在条目文件的同一目录中

在您的特定示例中，您在src/scss/layout/landing.scss和src/scss/layout/brands.scss中导入了一些URL，但我猜您的主要scss入口点在src/scss文件夹中

注意：对于“主scss入口点”，我指的是在javascript入口点src/js/index.js内导入的scss文件

因此，在您的示例中，在src/scss文件夹中而不是的scss文件中导入的每个图像都会出错

要解决此问题，请使用它根据原始源文件解析url（）语句中的相对路径

[
  { loader: 'css-loader'}, // set `importLoaders: 3` if needed but should works fine without it
  { loader: 'postcss-loader'},
  { loader: 'resolve-url-loader' }, // add this
  { loader: 'sass-loader',
    // sourceMap is required for 'resolve-url-loader' to work
    options: { sourceMap: true }
  }
]

CopyWebpackPlugin
是可选的
根据您的配置，您不需要
CopyWebpackPlugin
，因为您的图像已经由
url加载器处理了

注意：不输出图像，而是将其内联，当文件大于限制（以字节为单位）时，图像将由输出

file loader
将在dist/img文件夹中输出图像，因为您设置了
名称：'img/[name].[ext]'
，并且设置了
output.path:path.resolve（u dirname，'dist'）
，您可以修改“publicPath”URL（相对于服务器根目录）以匹配文件结构


//webpack.config.js
...
模块：{
规则：[
{
测试：/\（jpe？g | png | gif | svg）$/i，
使用：[
{
加载器：“文件加载器”，
选项：{
名称：“[name].[ext]”，
输出路径：“资产/图像/”，
publicPath:“/other dir/assets/images/”
}
}
]
}
]
}
hey@RobIsAnxious我已经尝试过了，但是我得到了一个构建错误：Module not found:error:Can't resolve'../../img/image title.png'ah非常感谢您！在阅读了mos之后，我从未想到它是css加载器