从流星中的css文件加载背景图像答案

【问题标题】：Loading background images from css file in meteor从流星中的css文件加载背景图像
【发布时间】：2019-07-13 20:12:50
【问题描述】：

我第一次构建一个流星应用程序并遇到了一些问题。特别是，我试图让图片查看器工作，但导航按钮中的左右箭头似乎不见了。当我尝试使用谷歌的开发人员工具加载应该在按钮中的图像时，它被显示为一个空图像。因此，可能是我没有将图像文件放在适当的目录中，因此流星无法将其加载到 css 文件中。我不确定是这种情况还是其他原因。这可能不是任何语法错误，因为当我在流星之外运行插件时，我能够看到按钮中的箭头。

这是我的 css 文件中的行：

background: transparent url('themes.gif') no-repeat left top;  margin-top: -45px;

【问题讨论】：

标签： meteor

【解决方案1】：

所以我设法让它工作。我在公共文件夹中创建了一个资源目录，并将css文件中的url更改为url("/resources/button")，这似乎可以解决问题。

【讨论】：

【解决方案2】：

您可以保留 CSS 原样，并将 theme.gif 文件放在 Meteor 应用程序的 /public 目录中 - 然后它应该可以访问。

根据docs：

最后，Meteor 服务器将提供公共目录下的所有文件，就像在 Rails 或 Django 项目中一样。这是存放图片、favicon.ico、robots.txt 和其他任何内容的地方。

【讨论】：

我已经尝试过了，但它似乎不起作用。难道是因为我是在windows上开发的？
嗯。有可能。你可以输入http://localhost:3000/themes.gif 来查看你的图片吗？如果没有，那就有问题了。你考虑过 Windows 上的 VirtualBox 吗？这就是我所做的——我认为 Meteor 变化太快无法尝试使用 windows shim。

【解决方案3】：

您必须在文件名前加上 / 前缀。

【讨论】：

【解决方案4】：

my web site architecture

body{   
  background-image: url('image/back1.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}

【讨论】：

不知道为什么这被否决了。赞成，因为它对我的案子有帮助。谢谢。
为我工作。不过不明白，为什么我需要将它们都放在“客户端”和“公共”文件夹下

【解决方案5】：

文件需要放到 /public 目录并从 css 中删除路径中的“/public”。

例如：如果路径中的图像 - /public/img/logo.png

然后使用下面的CSS：

background-image('img/logo.png');

【讨论】：

谢谢。这个答案为我解决了这个问题。主要是在 URL 中不包括“public”。