placeholder images are not showing

togonow commented 8 years ago

I have an same issue where placeholder images are not showing, i've tried different combinations of the paper-card attributes below (based on another github issue) but nothing works. and still nothing shows the place holder i even embeded it as a base 64 URI. any idea?

<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>paper-card</title>

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="./paper-card.html">
</head>
<body>
  <img src="./demo/cafe.png" />
  <paper-card heading="header"
    image="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=1350&h=1350"    fadeImage    preload-image    preloadImage    preload    placeholder="./demo/cafe.png"    placeholderImage="./demo/cafe.png">
    <div class="card-content"><p>Sample content</p></div>
  </paper-card>
</body>
</html>

togonow commented 8 years ago

I've noticed that this issue is only with paper-card, and not with iron-image see the link below https://gist.github.com/togonow/925d9ddb3dd6ba0e33b363bd2289de1f

notwaldorf commented 7 years ago

/cc @bicknellr

The attributes in there are a bit of a mess, but this does indeed not seem to work:

  <paper-card heading="header"
    image="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=150&h=150s"
    placeholder="http://placehold.it/150x150/FFC107/000000"
    preload>
    <div class="card-content"><p>Sample content</p></div>
  </paper-card>

ankitsorathiya commented 7 years ago

Any update on this issue? I have been trying different combination but doesn't seem to work.

wim82 commented 7 years ago

hey.. if i follow the docs/source it should be placeholderImage instead of placeholder - but i can't get it to work either. I've been trying as attribute and as property, but no luck.

bicknellr commented 7 years ago

https://github.com/PolymerElements/paper-card/blob/85958cbba0593b92427d8582baf86c6aaf6868ae/paper-card.html#L152

@notwaldorf, in your example placeholder and preload attributes should be placeholder-image and preload-image:

<paper-card heading="header"
  image="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=150&h=150s"
  placeholder="http://placehold.it/150x150/FFC107/000000"
  preload>
  <div class="card-content"><p>Sample content</p></div>
</paper-card>

->

<paper-card heading="header"
  image="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97350&w=150&h=150s"
  placeholder-image="http://placehold.it/150x150/FFC107/000000"
  preload-image>
  <div class="card-content"><p>Sample content</p></div>
</paper-card>

@togonow, in your linked gist you're camel-casing the attributes but they should be hyphenated when you're setting them using attributes:

<paper-card
  placeholderImage="data:image/png;base64,..."
  preloadImage=true
  fadeImage=true
  image="http://lorempixel.com/800/800/sports/9"></paper-card>

->

<paper-card
  placeholder-image="data:image/png;base64,..."
  preload-image
  fade-image
  image="http://lorempixel.com/800/800/sports/9"></paper-card>

I completely missed both of these things the first few times I looked at this issue. :) Messing up attributes is really tricky to debug. Unfortunately, there's nothing indicating that you set them incorrectly because there's no way to 'incorrectly' set an attribute: you just end up setting one that does nothing and not setting the one you wanted.

Anyway, would the folks running into this mind double checking their attributes?

michael-learns commented 6 years ago

Has there been a fix for this yet? Currently it's still not working for me.

<paper-card heading="[[item.name]]" 
    image="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjOvom9uczXAhXDrJQKHax-D38QjRwIBw&url=http%3A%2F%2Fwww.fujifilm.com%2Fproducts%2Fdigital_cameras%2Fx%2Ffujifilm_x70%2Fsample_images%2F&psig=AOvVaw2ZjVXM9sFQo3_olByasGRv&ust=1511243085193038"
    placeholder-image="http://placehold.it/150x150/FFC107/
      elevation="1" 
    animated-shadow="true">
                <div class="card-content">
                    <h3>Description</h3>
                    <template is="dom-if" if="{{item.description}}">
                        <p>[[item.description]]</p>
                    </template>
                    <template is="dom-if" if="{{!item.description}}">
                        <p> <em>No Description</em> </p>
                    </template>

                    <h3>Cost</h3>
                    <template is="dom-if" if="{{item.credit_cost}}">
                        <p>[[item.credit_cost]]</p>
                    </template>
                    <template is="dom-if" if="{{!item.credit_cost}}">
                        <p> <em>No Cost</em> </p>
                    </template>
                </div>
                <div class="card-actions" align="right">
                    <paper-button>Edit</paper-button>
                    <paper-button>Delete</paper-button>
                </div>
            </paper-card>

PolymerElements / paper-card

placeholder images are not showing #79