跳到主要内容

url()

数据 URI 图像内联

Stylus 随附了一个名为 url() 的可选函数,它替换了字面上的 url() 调用(并有条件地使用 base64 数据 URI 内联它们)。

示例

该函数本身可通过 require('stylus').url 获得。它接受一个 options 对象,返回一个函数,当 Stylus 看到 url() 时,它会在内部调用该函数。

.define(name, callback) 方法分配了一个 JavaScript 函数,可以从 Stylus 源中调用该函数。在这种情况下,由于我们的图像位于 ./css/images 中,我们可以忽略 paths 选项(默认情况下,图像查找是相对于正在呈现的文件执行的)。但是,如果需要,可以更改此行为:

stylus(str)
.set("filename", __dirname + "/css/test.styl")
.define("url", stylus.url())
.render(function (err, css) {
// render it
});

例如,假设我们的图像位于 ./public/images 中。我们想要使用 url(images/tobi.png)。我们可以将 paths 传递给我们的公共目录,以便它成为查找过程的一部分。

同样,如果我们想要 url(tobi.png),我们可以传递 paths: [__dirname + '/public/images']

stylus(str)
.set("filename", __dirname + "/css/test.styl")
.define("url", stylus.url({ paths: [__dirname + "/public"] }))
.render(function (err, css) {
// render it
});

SVG 的 utf8 编码

由于对图像进行 base64 编码实际上会增加原始大小,因此您可以选择在内联 SVG 时使用 utf8 编码。

有一个 bif 用于此:embedurl

.embed-with-utf8 {
background-image: embedurl("circle.svg", "utf8");
}

将导致使用 utf 编码的内联 SVG,而不是 base64 编码的内联 SVG。

如果您想使用 JS 定义,以便您可以在 utf 编码旁边使用 paths,则需要使用另一个名称定义它,而不是 url()。这是由于 url() 函数在 Stylus 中的解析方式:现在无法将额外的参数传递给它,因此您无法仅使用第二个参数调用 url 来设置编码。但是,如果您使用另一个名称定义了 url

stylus(str)
.set("filename", __dirname + "/css/test.styl")
.define("inline-url", stylus.url({ paths: [__dirname + "/public"] }))
.render(function (err, css) {
// render it
});

然后,您可以像使用 embedurl 一样使用 inline-url bif,但具有添加的 paths 功能:

.embed-with-utf8-at-path {
background-image: inline-url("tobi.svg", "utf8");
}

选项

  • limit 字节大小限制,默认为 30Kb(30000),使用 false 禁用限制
  • paths 图像分辨率路径(路径)