如何从飞镖聚合物组件中引用图像答案

【问题标题】：How to reference an image from a dart polymer component如何从飞镖聚合物组件中引用图像
【发布时间】：2014-01-25 14:49:30
【问题描述】：

我有一个引用图像的 Dart 聚合物组件。组件在路径component/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 放入样式标记修复了问题，这使得从 dart 编辑器运行或从构建 html 运行时相对 URL 相同。现在图像目录位于 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>

这解决了问题。

【问题讨论】：

标签： path dart dart-html

【解决方案1】：

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

/packages/<pkg_name>/<path>

这是基于How to refer to assets

【讨论】：

【解决方案2】：

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

另见Assets and Transformers

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

【讨论】：

你说的在技术上是正确的，虽然听起来很疯狂，因为他们为什么使用“资产”这个词和“资产”这个词来表示同一件事，这只是在邀请程序员发疯。

【解决方案3】：

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

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

【讨论】：