无法加载背景图像错误意外字符“�”（1:0）答案

【问题标题】：Can't load background image ERROR Unexpected character '�' (1:0)无法加载背景图像错误意外字符“�”（1:0）
【发布时间】：2017-10-23 19:03:49
【问题描述】：

我只是想将背景图像加载到我的 Angular 4 项目中。我为图像创建的路径是 'src/assets/images/background.jpeg' 到目前为止，我使用 angular cli 来生成我的项目，但只是通过在 atom 中创建一个目录来创建图像目录。

这是完整的错误

./src/assets/images/background.jpeg 中的错误模块解析失败：/Users/Joel/web_dev/projects/travel-journal/src/assets/images/background.jpeg 意外字符 '�' (1:0) 您可能需要适当的加载程序来处理此文件类型。（此二进制文件的源代码省略）

@ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./src/styles. CSS 6:179-221 @ ./src/styles.css @multi ./node_modules/leaflet/dist/leaflet.css ./node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css

webpack：编译失败。

我认为我需要在文件中的某处说明 .jpeg 是合适的文件类型，或者需要按照错误中的建议安装图像加载器。

我对 Angular 还比较陌生，所以很惊讶没有找到对我有用的类似问题的人。我看到一个说确保您的 html cmets 格式正确，它们是正确的。

src/styles.css

body{
  font-family: 'Jaldi', sans-serif;
  background-image: url('assets/images/background.jpeg');
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

我找不到 webpack 文件，否则我会发布它。我研究了here。如果在这个 Angular 项目中有任何其他文件可以帮助解决这个问题，请告诉我。

【问题讨论】：

只是为了论证，尝试使用.jpg作为文件扩展名的随机图像，看看它是否有效
更改为 .jpg。不久前，另一个帖子也有同样的问题。我写了一个评论，所以不容易找到它，但它解决了

标签： angular webpack image-loading

【解决方案1】：

试试url('/assets/images/background.jpeg');

或url('../images/background.jpeg')

【讨论】：

您的第一个解决方案是我在互联网上找到的唯一一个实际上使我的项目停止抛出有关路径的错误或警告的解决方案。我真的很感谢你！

【解决方案2】：

我在使用 VS 2017 Angular 和 .NET Core 模板时遇到了同样的问题：几乎让我发疯，直到我看到 Steven Sanderson (Set Image path on ASP.NET Core + Angular 2 template for Visual Studio) 推荐使用 require('../assets/images 的这篇文章/yourimage.jpg')，例如：

constructor() {
        this.images = [
            { "url": require("../../assets/images/image003.jpg"), "title": "Workin on water", "caption": "Sometimes it all just gets wet" },
            { "url": require("../../assets/images/image005.JPG"), "title": "Bus trip", "caption": "people havin fun on a dodgy bus " },

我试过这个，当我传递一个图像数组时，我的一些测试图像有大写的文件扩展名（即'/yourimage.JPG'），我注意到这些是唯一抛出错误的图像。为了解决这个问题，我尝试在模块 > 规则部分中将“JPG”条目添加到我的 webpack.server.js 中：

{ test: /\.(png|jpg|JPG|jpeg|gif|svg)$/, use: ['url-loader?limit=25000'] }

发现这行得通。作为一种解决方案，这对我的目的来说是更可取的，因为我的目的是遍历从数据源加载的一系列图像，但我发现另一种方法也有效，就是简单地以小写形式指定图像路径。

【讨论】：

【解决方案3】：

当我将styles.css中的文件和文件路径url从.jpeg重命名为assets/images/background.jpg时，图像加载的服务器错误消失了。

我不确定为什么 .jpeg 不会像最初的图像那样具有该扩展名；但是 .jpg 不会出错。

【讨论】：

从 .jpeg 重命名为 jpg 解决了这个问题

【解决方案4】：

如果您没有任何问题，请从服务器加载它而不是 url('/assets/images/background.jpeg');

点赞网址('https://www.example.com/assets/images/background.jpeg');

尝试一次对我有用。

【讨论】：