search

mlisook / plastic-image

A Polymer 3.0 element which adds extra plasticity to <iron-image> with support for srcset and lazy loading
MIT License
30 stars 6 forks source link

Previous image should disappear if set undefined or empty string to srcset #15

Closed ozasadnyy closed 7 years ago

ozasadnyy commented 7 years ago

Assume we have an array of images

this.images = ['/image-1.jpg', '/image-2.jpg', '', '/image-3.jpg']

and template:

<template is="dom-repeat" items="[[images]]" as="image">
  <plastic-image srcset="[[image]]" sizing="cover" lazy-load preload fade></plastic-image>
</template>

at third itteration image will not be changed so '/image-2.jpg' will remain. With <iron-image> image will just disappear.

ozasadnyy commented 7 years ago

I will send a PR in a minute

mlisook commented 7 years ago

I do not see this effect. What am I doing wrong?

<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="bower_components/plastic-image/plastic-image.html">
    <style>
        body {
            margin: 0;
            font-family: 'Roboto', 'Noto', sans-serif;
            line-height: 1.5;
            min-height: 100vh;
            background-color: #eeeeee;
        }
        .image {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <dom-bind>
        <template>
            <template is="dom-repeat" items="[[images]]" as="image">
                <plastic-image class="image" srcset="[[image]]" sizing="cover" lazy-load preload fade></plastic-image>
            </template>
        </template>
    </dom-bind>
    <script>
        let db = document.querySelector('dom-bind');
        db.images = ['alleycat.jpeg', 'badwolf.jpg', '', 'darkwing.png'];
    </script>
</body>

Which gives me: pimg-iss17

ozasadnyy commented 7 years ago

Yeah, bad example. Sorry. Try to iterate in the js code on a single <plastic-image>

mlisook commented 7 years ago

Got it