paper-card
paper-card copied to clipboard
PolymerElements
placeholder images are not showing
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>
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
/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>
Any update on this issue? I have been trying different combination but doesn't seem to work.
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.
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?
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>
