Question

我有Dart聚合物成分参考图像。该组件位于路径组件/ logo-header.html

中

<polymer-element name="logo-header">
  <template>
    <style>
    </style>
    <img src="../image/youtube.png" style="width: 109px;height:47px;float:left" />
  </template>
  <script type="application/dart" src="LogoHeader.dart"></script>
</polymer-element>

当我构建项目并使用构建的应用程序时，此代码可以正常工作。如果我只是运行应用程序，它就不起作用。

如何引用图像以使URL对于构建版本和从调试器运行是正确的？

我的问题是URL在img src中，当从dart编辑器运行时，相对路径与从构建html运行时的相对路径不同。（当我说跑步时，我的意思是打开html页面。）

将URL放入样式标记修复了问题，这使得相对URL在从dart编辑器运行或从构建html运行时是相同的。现在，图像目录位于web目录中，因此其web / image / youtube.png。

<polymer-element name="logo-header">
  <template>
    <style>
      .youtube {
        background-image:url('image/youtube.png');
      }
    </style>
    <div class="youtube" style="width: 109px;height:47px;float:left"></div>
  </template>
  <script type="application/dart" src="LogoHeader.dart"></script>
</polymer-element>

这解决了问题。

Answer 1

当您将图像放入[package]/asset/image（图像子网是可选的）目录并使用路径assets/image/youtube.png时，这应该有效。从DartEditor运行时可能会失败，因为DartEditor IMHO仍然不支持asset目录。

另见Assets and Transformers

如果您使用相对于web目录的路径，它也应该有效。为了提供一个具体的例子，有必要知道你的logo-header元素存储在哪个目录中。

Answer 2

您可以像这样引用您的图片：

/packages/<pkg_name>/<path>

这基于How to refer to assets

Answer 3

问题特别是当Dart应用程序从Dart编辑器（IDE）运行时，图像的路径与运行构建HTML（构建产品）时图像的路径不同。

也许这是一个错误或......不是一个错误，我不知道。令人讨厌的是，当从IDE运行或从构建产品运行时，路径应该具有不同的路径。修复是使用CSS，现在问题中记录了修复。

如何参考飞镖聚合物组件的图像

3 个答案: