Question

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

这是完整的错误

   ./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注释格式正确，它们是。

的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项目中有任何其他文件对此问题有帮助，请告诉我。

Answer 1

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

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

Answer 2

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

我不确定为什么.jpeg不会像原来那样延伸;但.jpg不会出错。

Answer 3

在使用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'），我注意到这些是唯一抛出错误的文件。为了解决这个问题，我尝试在模块＆gt;中将'JPG'条目添加到我的webpack.server.js中。因此规则部分：

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

并发现这有效。作为一种解决方案，这对于我的目的来说是优选的，因为我的目的是迭代从数据源加载的一系列图像，但我发现另一种方法也是简单地以小写形式指定图像路径。

Answer 4

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

like url('https://www.example.com/assets/images/background.jpeg');

它对我有用，尝试一次。

无法加载背景图像ERROR意外字符' '（1：0）

4 个答案: