使用connect-assets节点表示中的图像路径

Question

我正在尝试将twitter-bootstrap包含在my project和glyphicons-halflings图像中，它们只能在同一目录(assets/css/)中运行，而且只能在Chrome (火狐和Opera语言中不能)中运行。包括零件(文件'app.less')：

@import 'twitter-bootstrap/bootstrap';
@iconSpritePath: "/img/glyphicons-halflings.png";
@iconWhiteSpritePath: "/img/glyphicons-halflings-white.png";

我尝试使用多种选项: /img..，img/..，/../img，/gly...，放在公共目录中(顺便说一下，我想在图像文件夹中使用它)，但它不起作用。也许我可以在connect- set中设置这个选项。This文件夹图片。

包括仅投影app.less文件!= css('app')

在这种情况下，它适用于Chrome。

更新：

现在我看到，在Chrome url中，转换为http://localhost:3000/img/glyphicons-halflings.png的url总是http://localhost:3000/css/../img/glyphicons-halflings.png，而在firefox中，无法加载的总是../img/glyphicons-halflings.png (background-image: url("../img/glyphicons-halflings.png");)。我对@iconSpritePath的辩护根本不起作用。

Answer 1

我在express中使用bootstrap(使用较少的文件)。适用于所有浏览器。你必须安装更少的中间件和更少的模块。下面是我的代码：

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, '/public' )));

和我的文件夹结构：

/public/img <-- the bootstrap img and the rest
/public/javascripts
/public/stylesheets

我唯一需要修改的就是无引导文件中的includes。例如，来自：

// CSS Reset
@import "reset.less";

至

// CSS Reset
@import "/public/stylesheets/reset.less";

Answer 2

我查看了您的代码，并简单地将字形图标文件复制到public/img文件夹树中，这对我来说是有效的。

我在https://github.com/TrevorBurnham/connect-assets中没有看到任何关于它能够支持图像的提法，所以我认为这就是问题所在。

Answer 3

我也有类似的问题，但它与css文件中的路径无关。我只是想在“资源/图像”中引用一个图像，但当我使用assetPath('images/logo.png')时，它说找不到它。connect-assets (或者mincer)似乎要做的是从资产中剥离第一个目录。为了引用您的图像，您需要指定不带路径的图像，例如assetPath('logo.png')。