3

我有一个引用图像的 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>

这解决了问题。

4

3 回答 3

1

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

另请参阅资产和转换器

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

于 2014-01-25T14:59:30.310 回答
1

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

/packages/<pkg_name>/<path>

这是基于如何引用资产

于 2016-06-02T03:20:51.503 回答
0

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

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

于 2014-01-26T12:11:41.237 回答