跳至内容
在此页面

url()

数据 URI 图像内联

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

示例

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

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

stylus(str)
  .set('filename', __dirname + '/css/test.styl')
  .define('url', stylus.url())
  .render(function(err, css){
    // render it
  });
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
  });
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");
}
.embed-with-utf8 {
  background-image: embedurl("circle.svg", "utf8");
}

将生成 utf 编码的内联 SVG,而不是 base64 编码的 SVG。

如果您希望使用 JS 定义,以便在 utf 编码旁边使用 paths,则需要使用另一个名称(而不是 url())进行定义。这是由于 Stylus 中解析 url() 函数的方式:现在不可能向其传递额外的参数,因此您不能只使用第二个参数调用 url 来设置编码。但如果您使用另一个名称定义 url

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

然后你可以使用 inline-url bif,就像使用 embedurl 一样,但增加了 paths 功能

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

选项

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