你如何使用数据-uri在无标记？

Question

我使用的是无标记的(我认为是1.4.1)，我在我的.less文件中有这个

#btnSearch { background-image: data-uri('/images/btnSearch.png'); } 

它抛出此错误：

数据-uri函数无法读取文件'/css/less/site.less‘中第140行的文件’/映像/btnSearch.png‘。

如果我用data-uri更改url，它会工作(以证明文件的存在)。

我还尝试了相对路径(../../images/btnSearch.png)以及其他一些JPEG图像。

Answer 1

GitHub上的数据uri函数的代码在异常处理中有以下注释。

//这比仅仅检查文件是否存在更为普遍 //它可能由于其他原因而失败，例如安全权限

我将检查是否存在权限问题，因为要将其转换为base64，需要将数据读取到映像。

Answer 2

经过多年的研究，，我确实让使用了一个完全合格的本地(文件系统) path。

例如：

.less输入

body {
#divTest {
        background-image: data-uri('C:\Users\Ben\Source\Repos\ASPNET\ASPNET\Content\accept.png');
    }
}

输出

.#divTest {
  border: solid 1px blue;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAKfSURBVDjLpZPrS1NhHMf9O3bOdmwDCWREIYKEUHsVJBI7mg3FvCxL09290jZj2EyLMnJexkgpLbPUanNOberU5taUMnHZUULMvelCtWF0sW/n7MVMEiN64AsPD8/n83uucQDi/id/DBT4Dolypw/qsz0pTMbj/WHpiDgsdSUyUmeiPt2+V7SrIM+bSss8ySGdR4abQQv6lrui6VxsRonrGCS9VEjSQ9E7CtiqdOZ4UuTqnBHO1X7YXl6Daa4yGq7vWO1D40wVDtj4kWQbn94myPGkCDPdSesczE2sCZShwl8CzcwZ6NiUs6n2nYX99T1cnKqA2EKui6+TwphA5k4yqMayopU5mANV3lNQTBdCMVUA9VQh3GuDMHiVcLCS3J4jSLhCGmKCjBEx0xlshjXYhApfMZRP5CyYD+UkG08+xt+4wLVQZA1tzxthm2tEfD3JxARH7QkbD1ZuozaggdZbxK5kAIsf5qGaKMTY2lAU/rH5HW3PLsEwUYy+YCcERmIjJpDcpzb6l7th9KtQ69fi09ePUej9l7cx2DJbD7UrG3r3afQHOyCo+V3QQzE35pvQvnAZukk5zL5qRL59jsKbPzdheXoBZc4saFhBS6AO7V4zqCpiawuptwQG+UAa7Ct3UT0hh9p9EnXT5Vh6t4C22QaUDh6HwnECOmcO7K+6kW49DKqS2DrEZCtfuI+9GrNHg4fMHVSO5kE7nAPVkAxKBxcOzsajpS4Yh4ohUPPWKTUh3PaQEptIOr6BiJjcZXCwktaAGfrRIpwblqOV3YKdhfXOIvBLeREWpnd8ynsaSJoyESFphwTtfjN6X1jRO2+FxWtCWksqBApeiFIR9K6fiTpPiigDoadqCEag5YUFKl6Yrciw0VOlhOivv/Ff8wtn0KzlebrUYwAAAABJRU5ErkJggg==");
}

查看DataUriFunction中的源代码很明显，该函数不需要一个完全限定的web地址，并声称“文件名必须是本地文件”，但这是令人困惑的，因为lesscss.org在其文档中给出了下面的例子

Example: data-uri('../data/image.jpg');

我会说这是一个bug，当然不是最优的，但是如果不深入了解dotless.Core.Parser.Functions.DataUriFunction的来源，我就不能确定。