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

菲尔

我有一个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>

这解决了问题。

纳瓦夫·阿苏拉米(Nawaf Alsulami)

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

/packages/<pkg_name>/<path>

这基于如何引用资产

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

去除飞镖中的聚合物元素

来自分类Dev

飞镖聚合物中的条件CSS

来自分类Dev

聚合物飞镖问题

来自分类Dev

如何在聚合物表达中引用“ this”

来自分类Dev

获取飞镖聚合物重复模板中的索引

来自分类Dev

在飞镖中显示纸吐司聚合物元素

来自分类Dev

如何获取铁表(聚合物飞镖)中的元素模型?

来自分类Dev

如何在聚合物飞镖行为混合中设置属性?

来自分类Dev

飞镖聚合物更新聚合物dom元素

来自分类Dev

飞镖聚合物更新聚合物dom元素

来自分类Dev

如何从Angular.Dart组件内部引用聚合物组件

来自分类Dev

观察聚合物飞镖的包装

来自分类Dev

飞镖/聚合物加载屏幕?

来自分类Dev

重复以上内容,聚合物飞镖

来自分类Dev

聚合物飞镖-多种视图

来自分类Dev

1.0的聚合物飞镖测试

来自分类Dev

聚合物飞镖-多种视图

来自分类Dev

重复以上内容,聚合物飞镖

来自分类Dev

如何将数据传递到飞镖聚合物中的新创建元素?

来自分类Dev

如何选择聚合物中的桌布?

来自分类Dev

聚合物-组件布局

来自分类Dev

如何在核心工具栏聚合物组件中获得垂直居中

来自分类Dev

如何在核心工具栏聚合物组件中获得垂直居中

来自分类Dev

如果通过PolyGit加载组件,如何更改聚合物中的原色变量

来自分类Dev

飞镖,聚合物生成失败,找不到聚合物/polymer.dart吗?

来自分类Dev

w3schools模态图像在使用聚合物网络组件的Chrome中不起作用

来自分类Dev

在聚合物中定位?

来自分类Dev

在聚合物飞镖应用中使用更少