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){
    // 渲染它
  });

stylus(str)
  .set('filename', __dirname + '/css/test.styl')
  .define('url', stylus.url())
  .render(function(err, css){
    // 渲染它
  });

例如，假设我们的图像位于 ./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){
    // 渲染它
  });

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

SVG 的 `utf8` 编码

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

有一个内置函数用于此目的：embedurl：

css

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

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

这将生成 utf8 编码的内联 SVG，而不是 base64 编码。

如果你想使用 JS 定义以便同时使用 paths 和 utf 编码，你需要使用另一个名称定义它，而不是 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){
    // 渲染它
  });

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

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

css

.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 图像解析路径

url() ​

数据 URI 图像内联 ​

示例 ​

SVG 的 utf8 编码 ​

选项 ​

url()

数据 URI 图像内联

示例

SVG 的 `utf8` 编码

选项