Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

placeholder images are not showing #79

Open
togonow opened this issue Aug 30, 2016 · 6 comments
Open

placeholder images are not showing #79

togonow opened this issue Aug 30, 2016 · 6 comments

Comments

@togonow
Copy link

togonow commented Aug 30, 2016

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
Copy link
Author

togonow commented Sep 2, 2016

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
Copy link
Contributor

/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
Copy link

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

@wim82
Copy link

wim82 commented May 25, 2017

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
Copy link
Contributor

paper-card/paper-card.html

Line 152 in 85958cb

<iron-image

@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
Copy link

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>

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@bicknellr @notwaldorf @ankitsorathiya @togonow @wim82 @michael-learns