How to reference an image from a dart polymer component

Question

I have a Dart polymer component referring to an image. The component is in the path 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>

This code works fine for when I Build the project and use the built application. It does NOT work if I just run the application.

How can I refer to the image so that the URL is correct for the built version and the run from the debugger?

---

My problem was that the URL is in the img src, when this is run from the dart editor the relative path is different to when this is run from the build html. (When I say run, I mean open the html page).

Putting the URL into the style tag fixed the problem, this made the relative URL to be the same when it is run from dart editor or run from the build html. Now the image directory is located in the web directory so its 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>

This fixed the problem.

Answer 1

You can reference your image like this:

/packages/<pkg_name>/<path>

This is based on How to refer to assets

Answer 2

This should work when you put the image in the [package]/asset/image (image subdir is optional of course) directory and use the path assets/image/youtube.png. This may fail when run from DartEditor though because DartEditor IMHO still doesn't support the asset directory.

see also Assets and Transformers

If you use a path relative to your web directory it should also work. To provide a concrete example it's necessary to know in which directory your logo-header element is stored.

Answer 3

The problem was specifically that when the Dart application was run from the Dart editor (IDE) the path to the image was different to the path to the image when running the build HTML (the build product).

Perhaps this is a bug or ... not a bug, I don't know. Its annoying that a path should have a different path when running from IDE or running from build product. The fix was to use CSS, the fix is documented in the question now.