【问题标题】:How do you use data-uri in dotless?你如何在 dotless 中使用 data-uri?
【发布时间】:2014-08-12 02:36:03
【问题描述】:

我正在使用 dotless(我认为是 1.4.1),我的 .less 文件中有这个

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

它会抛出这个错误:

Data-uri 函数无法读取文件“/css/less/site.less”中第 140 行的文件“/images/btnSearch.png”

如果我将 data-uri 更改为 url 它可以工作(证明文件存在)。
我还尝试了相对路径 (../../images/btnSearch.png) 以及其他一些 JPEG 图像。

【问题讨论】:

    标签: less dotless


    【解决方案1】:

    GitHub 上的 data-uri 函数的代码在异常处理中有以下 cmets。

    // 这比检查文件是否存在更通用

    // 它可能由于安全权限等其他原因而失败

    我会检查没有权限问题,因为 Dotless 需要读取图像才能将其转换为 base64

    【讨论】:

    • 谢谢科林。我目前在 Windows 7 上,直接从 VS 2013 调试(使用 VS 内置的 IIS Express)。我不知道任何可能导致此问题的权限问题...
    • @Aximili 你有没有检查过文件不是不可访问的——可能是由于源代码控制在 VS 中的活动?
    【解决方案2】:

    在搞砸了这么多年之后,我确实让它与 完全合格的本地(文件系统)路径一起工作

    例如

    .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 中的源代码,很明显该函数不需要完全限定的网址,并声称“文件名必须是本地文件”,但这令人困惑,因为 lesscss.org 在他们的文档中给出了following example /p>

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

    我会说这是一个错误,当然看起来不是最优的,但如果不进入 dotless.Core.Parser.Functions.DataUriFunction 的源代码,我无法确定。

    【讨论】:

      猜你喜欢
      • 2016-02-25
      • 2018-05-24
      • 2015-12-11
      • 1970-01-01
      • 2012-12-05
      • 1970-01-01
      • 1970-01-01
      • 2019-09-19
      • 1970-01-01
      相关资源
      最近更新 更多