polymerelements / iron-image Goto Github PK

Image element with sizing and preloading options

Home Page: https://www.webcomponents.org/element/PolymerElements/iron-image

HTML 63.40% JavaScript 36.60%

iron-image's Introduction

<iron-image>

iron-image is an element for displaying an image that provides useful sizing and preloading options not found on the standard <img> tag.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-image

In an HTML file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-image/iron-image.js';
    </script>
    <style>
      iron-image {
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <iron-image sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import '@polymer/iron-image/iron-image.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-image sizing="contain" fade src="http://lorempixel.com/600/400"></iron-image>
    `;
  }
}

customElements.define('example-element', ExampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-image
cd iron-image
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

iron-image's People

Contributors

Stargazers

Watchers

iron-image's Issues

src binding issue

The iron-image element does not display the image correctly.

sample and demo code for the issue

Expected outcome

Loads and displays image from src.

Actual outcome

The iron-image element only displays image correctly when src is set declaratively.
It seems like src has a wrong image location if compound binding or property binding is used.

Steps to reproduce

Set up src declaratively and iron-image loads and displays image correctly.
Use compound-binding or property binding for the value of src and iron-image fails to display any image.

this.style.backgroundImage needs quotes

I had an issue with a URL that did not load when using the sizing property. I changed the code and it works now.

Before:

        this.style.backgroundImage = this.src ? 'url(' + this.src + ')': '';

After:

        this.style.backgroundImage = this.src ? 'url("' + this.src + '")': '';

The example markup was:

<iron-image sizing="cover" style="width: 400px; height: 400px" preload src="uploads/screenshot-modesto craigslist org 2015-06-08 22-42-27.png"></iron-image>

I can submit a pull request for this if necessary.

Add a background-size:inherit to the placeholder

Description

When you use the paper-card element which uses iron-image, you can't precise the "size" properties to the iron-image.
The only choice for you is to customize this css rule like that:
--paper-card-header-image {
background-size: cover;
}
BUT the iron-image background-size doesn't change because there is no attribute in the placeholder css rules like this one:
background-size: inherit;

Expected outcome

The iron-image placeholder of a paper-card image must inherit from this rule in the paper card definition:
--paper-card-header-image {
background-size: cover;
}

Actual outcome

The background-size: cover; doesn't work, cause there is no background-size: inherit; in the #placeholder css rules.

Steps to reproduce

Put a paper-card element in a page (eventually in an app-grid element), and add it an image, and a placeholder smaller than the image.
Open the page in a web browser.
What you'll see is that the placeholder shown is background-repeat instead of cover.

Any room for an alt tag?

I apologize for creating a pull request for this before reading the contributing Doc.

The original image is visible underneath the placeholder while loading

Description

When preload is set, but there is no placeholder specified, or it resolves to a transparent / translucent image, the original image underneath is seen being loaded. If the image is progressive, it results in an image being progressively loaded (line by line) under the placeholder, which (for me) defeats the purpose of the placeholder.

Expected outcome

The original image should not be visible up until fully loaded, regardless of the placeholder.

Actual outcome

The original image is seen being progressively loaded (line by line) under the placeholder image.

Live Demo

https://jsbin.com/culezequje/1

Steps to reproduce

Open the JSBin.
Open the Chrome console and throttle your connection to something slower than 1mb/s, so you'll be able to see the original image being loaded (it's about 2.5 mb).
Make sure you also check "Disable cache", so the image won't come from the cache instantly.

Browsers Affected

Chrome
[?] Firefox
[?] Safari 9
[?] Safari 8
[?] Safari 7
[?] Edge
[?] IE 11
[?] IE 10

iron-image accessibility report

Here are the audit results:

[Severe] Elements with ARIA roles must use a valid, non-abstract ARIA role (20)[Warning] Images should have an alt attribute (6)[Warning] Text elements should have a reasonable contrast ratio (1)[Warning] These elements are focusable but either invisible or obscured by another element (9)Not applicable tests (9)Passing tests (4)

Issues found:

The text that says "loading" over the image box is too light. We need to improve that contrast.

In terns of proper labels, all of the images just say "image". I knnow this will be up to the developer to set though.

Also, when I click on the button to load or reload, I do not hear an announcement that the image is loading, or that the load is complete. We should consider how to convey this status.

With ChromeVox / the keyboard on Chrome OS, I am not able to access the images -- only the written text and buttons. I am able to access them with VoiceOver on Mac though, and hear the (lack of) alt text.

Add support for SVGs

It would be useful if there's a way to support svgs.

sizing attribute broken when using custom property apis

Description

The attribute sizing will be broken if --iron-image-width and --iron-image-height are used instead of width and height html attributes.

Note: this is with using `placeholder="data:image/jpeg;base64,...` base64 image

Expected outcome

Image will show with sizing="cover", --iron-image-width, and --iron-image-height

Actual outcome

Image does not show at all and image element takes no space on doc flow.

Live Demo

Steps to reproduce

Browsers Affected

Don't break WebP Polyfill

Description

WebP is a great image format but only Chrome natively supports it. A Javascript polyfill exists but (I believe) due to iron-image not populating the img element's src tag, the polyfill doesn't work.

Expected outcome

https://jsfiddle.net/t03yybsm/2/ shows two images on all browsers.

Actual outcome

https://jsfiddle.net/t03yybsm/2/ shows two images on Chrome and one broken image on most other browers.

Live Demo

https://jsfiddle.net/t03yybsm/2/

Steps to reproduce

https://jsfiddle.net/t03yybsm/2/

Browsers Affected

[-] Chrome
Firefox
Safari 9
Safari 8
Safari 7
[?] Edge
[?] IE 11
[?] IE 10

a11y: adding support to describe the image

It is necessary to add some extra attributes to iron-image, so a user can describe image content using aria-describedby attribute (longdesc is no longer supported by any browser, it will not be necessary to add it).

Feature request: iron-image to support html picture element

For responsive web purposes.

spec:
http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element

Some examples here:
http://www.html5rocks.com/en/tutorials/responsive/picture-element/

Docs: computed props should be private or have doc strings.

https://github.com/PolymerElements/iron-image/blob/master/iron-image.html#L234-L239

requiresPreload and canLoad should have doc strings or be private (prefixed with "_") so they're not picked up in the docs:

https://elements.polymer-project.org/elements/iron-image#canLoad

Load event?

There should be a on-loaded event, not just a property.

Bad state possible when reusing the element with multiple images

Seeing this with iron-list currently, but I believe this is a general issue when re-using the element with multiple images. Reproduction:

Set preload to true on an iron-image element.
Set the src property to an image that is not available.
The placeholder is correctly shown.
Now set the src property to an available image.

Result:
The placeholder still shows.
Expected:
The available image should show.

docs: iron-image position property should define valid values

Description

The docs for iron-image's position property define a default value of center but they don't define what other values are valid.

Relevant code:

iron-image/iron-image.html

Line 178 in d0699b5

value: 'center'

Expected outcome

Similar to the docs for iron-image's sizing property it should list the valid values.

Actual outcome

center appears to be the only valid value of this property. Searching the code and repository doesn't turn up anything helpful.

Live Demo

https://elements.polymer-project.org/elements/iron-image#property-position

With sizing property, the right click doesn't show the image options

Description

With sizing, the right click doesn't show the image options

Expected outcome

Showing the image options.

Actual outcome

With sizing property, the right click doesn't show the image options.

without `sizing`	with `sizing`

Live Demo

https://elements.polymer-project.org/elements/iron-image?view=demo

Applying border-radius with CSS no longer works

Not sure if this was a supported feature to begin with, but since it used to work I thought I'll mention it.

Using iron-image v1.2.2, adding a border-radius: 50% via CSS no longer works. The images end up being square.
Before: and after:

loaded property change multiple times inside iron-list

Description

When use the <iron-image> element inside <iron-list>, iron-image loaded property change multiple times when scrolling page.
I understand that iron-list will detach element when that out of the window for a distance.

Expected outcome

I expected on-loaded-changed will fire only once when an image was full loaded.

Actual outcome

on-loaded-changed event observer will fire multiple times when scrolling back and forth.

Live Demo

https://jsbin.com/dirazo/edit?html,console,output

Disable background color placeholder once loaded

HI,
I will like to know if someone has an idea on how to achieve the following:

set the iron image to a background color to use as placeholder
letting the image to load
once the image is loaded, remove or disable the color background
I'm sure there is should be a way, but so far none of my attempts as been successful.

This is an example of one of them:

<iron-image style="width:100%; height:360px; background-color: lightgray;" hidden$="[[!loadedImg]]" loaded="{{loadedImg}}" sizing="contain" preload fade src="http://lorempixel.com/800/360" ></iron-image>

Thanks in advance.

Cheers

Handle src url errors

The element doesn't let you know when a url is bad. It also does not handle re-setting the src after it was set to a bad url correctly. I have submitting a pull request to address this.
#35

Events

What events does this element broadcast? I noticed the tests included use of loaded-changed. Is there documentation for that somewhere?

Exception with absolute URLs on Polymer 1.6.1

Description

A very recent change in Polymer due to Polymer/polymer#2448 causes the following exception to be thrown when using an absolute URL as the image src:

VM1527:1 Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at TypeError (native)
    at eval (eval at evaluate (unknown source), <anonymous>:1:1)
    at iron-image._computeImgDivARIALabel (http://localhost:3001/assets/application-658e89886904e8ba3c8a9b98211302f287e1e8e6f5f8aa17ac61a231bfd0ac6f.html:19972:31)
    at iron-image._annotatedComputationEffect (http://localhost:3001/assets/application-658e89886904e8ba3c8a9b98211302f287e1e8e6f5f8aa17ac61a231bfd0ac6f.html:4494:24)

I think this is because new URL() expects a full URL with domain and protocol but now Polymer.ResolveUrl.resolveUrl() is returning the original absolute path without modification.

I think the solution is to change

iron-image/iron-image.html

Line 342 in e5872b8

var pathComponents = (new URL(this._resolveSrc(this.src))).pathname.split("/");

to supply the second parameter for URL() (this.ownerDocument.baseURI).

Steps to reproduce

Add an iron-image element with an absolute path as the src attribute and no alt value set.

Request: Add mixin for #sizedImgDiv

Description

A use case for iron-image can be to add a box shadow inset in order to render a gradient across the image, such as:

-webkit-box-shadow: inset 0px -29px 55px -18px rgba(0,0,0,0.65);
box-shadow: inset 0px -29px 55px -18px rgba(0,0,0,0.65);

Setting this style on iron-image will not render as #sizedImgDiv is rendered on top of the iron-image tags.

Expected outcome

Should be able to use box-shadow insets with iron-image

Actual outcome

Box shadow insets is not rendering because they need to be applied to #sizedImgDiv

Proposed solution

Add a mixin to #sizedImgDiv

Let me know if you want a PR.

Browsers Affected

Drag to desktop when using sizing="contain"

Description

The iron-image component uses CSS backgroundImage when containing the image or having the image cover it. While this is awesome for layout, it applies [hidden] the actual img tag making it inaccessible to dragging to the desktop.

Desired outcome

It is possible to drag the image to the desktop.

Actual outcome

You can't drag the image.

Live Demo

https://elements.polymer-project.org/elements/iron-image?view=demo:demo/index.html&active=iron-image

Steps to reproduce

Put a iron-image element in the page.
Set the sizing property to "contain".
Open the page in a web browser.

Conversation

Are there any accessibility issues with using something like position: relative; opacity: 0; width: 100%; height: 100%; in order to allow the image to be draggable but not effect the actual layout? In which case it would seem to make sense to either surface a CSS mixin, a component property to change the application of the [hidden], or possible both. I'd be happy to prepare a PR for what made the most sense to the health of the component.

`loaded` should be named `preloaded`

The loaded property doesn't actually reflect when the wrapped image has loaded and is contributing to layout. Instead, it is used to indicate either that the iron-image does not require preloading or that the requested URL was used as the source for an offscreen image and that image loaded. It sounds like the behavior currently exposed as loaded should really be exposed as preloaded and that loaded should refer to whether or not the visible image has loaded.

Preload placeholder image not being properly displayed

There are two problems related to placeholder images:

Preload image is being displayed over the last image loaded when iron-image component is reused
Preload image sometimes is being hidden before image is fully loaded (when you change image src quickly)

I made a JSBin to reproduce the problem. You need to scroll down the list very fast in order to see both problems (this way it will load a lot of images). Notice how pre-load appears over the last image loaded. And sometimes preload image disappears before new image is loaded.

http://jsbin.com/raleni/19/edit?html,output

This is the problem I reported in issue #16. I'm filing it here as a new issue. I'll fork and submit my fix shortly afterwards.

`loading` is true when src is the empty string.

The loading attribute is true whenever src is the empty string. This occurs both before an iron-image has its src attribute or when src is manually set to ''. (demo)

a href: add clickable link to iron-image

I see myself doing a lot. I wonder if other people are also doing it.
I am trying to avoid doing:

      <a href$="[[clickUrl]]">
        <iron-image src="[[imgSrc]]"></iron-image>
      </a>

Image not displayed in the content of a <paper-header-panel> when using sizing

Description

Chrome 50 and the latest Safari on OSX won't display an iron-image inside the "content area" of a paper-header-panel if its sizing attribute is set.
Firefox 46, Edge and IE11 all display the image properly.

Here you can find a simple test-page affected : https://pub.xtof.info/iron-image/ko/

If an absolute positioning is applied to the iron-image, it will be properly displayed in all browsers.
See: https://pub.xtof.info/iron-image/ok/

Animated GIFs are not animated

Animated GIFs are not animated in an iron-image.

protocol relative src broken

It seems that e7ef3ae#diff-3005a2eaefe34d5d0afb8d08687f8aaeR394 has broken protocol relative url in src like

"//img.youtube.com/vi/18OXnzrw1V1/maxresdefault.jpg" is e.g. resolved to "http://localhost//img.youtube.com/vi/18OXnzrw1V1/maxresdefault.jpg"

expected: the value of a protocol relative src url should not be changed

the following change fixed the issue for me:

if (resolved[0] === '/') to if (resolved[0] === '/' && resolved.indexOf('//') != 0)

The demo don't have the meta tags for proper display on mobile

The demo don't have the meta tags for proper display on mobile.

Prevent load still loads the images if the src is set

Description

The preventLoad does not work when the src has been set on iron-image

Expected outcome

Expected that the image would not be loaded until preventLoad was set to false

Actual outcome

Image was loaded

Live Demo

  <iron-image src="http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-001-1000x667.jpg" preventLoad>
  </iron-image>

Steps to reproduce

Browsers Affected

Chrome
[?] Firefox
[?] Safari 9
[?] Safari 8
[?] Safari 7
[?] Edge
[?] IE 11
[?] IE 10

Adding the ability to fall back to another image

It would be awesome if an image could fall back to another if it fails or is not specified. The changes necessary for this would not be too difficult.

Iron image is not displayed

With the following code does not show me the image with iron-image:

<head>
<style is="custom-style">
iron-image{
      --iron-image-width:150px;
      --iron-image-height:150px; 
      display: block;
      margin:auto;
    }     
</style>
</head>
<body>
<app-drawer swipe-open>   
        <iron-image sizing="contain" src="android.png"></iron-image>        
</app-drawer>`
</body>

In this other way the iron image is shown:

<iron-image style="width:150px; height:150px; display: block; margin:auto;" sizing="cover" src="android.png"></iron-image>

Put <content></content> at end of image template

In earlier versions of element it have.

  <content></content>
It allows to put content over image with very little efforts.
In latest releases it was removed completely.

Placeholder with data uri doesn't work

Description

I followed the doc suggestion and put a placeholder as data uri

<iron-image width="185" height="150"
                    placeholder="data:image/svg+xml;utf8,
    <svg fill='#000000' height='48' viewBox='0 0 24 24' width='48' xmlns='http://www.w3.org/2000/svg'>
        <path d='M0 0h24v24H0z' fill='none'/>
        <path d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/>
    </svg>"
                   sizing="contain" fade preload></iron-image>

instead of

<iron-image width="185" height="150"
                    placeholder="images/ic_photo_black_48px.svg"
                    sizing="contain" fade preload></iron-image>

First code fragement doesn't work, second with external asset works fine.

Expected outcome

### Actual outcome

Blank. Quiet strange is that in JS level the this.$.placeholder.style.backgroundImage assignment failed. Maybe its a Chrome bug?

### Browsers Affected

Create IronImageBehavior for element extension

Description

Unlike paper input (https://github.com/PolymerElements/paper-input), the iron image is not extendable. To use its properties, I have to recreate an iron image from scratch and add an iron image behavior.

Expected outcome

This code should work (with proper importations):

<link rel="import" href="../iron-image-behavior/iron-image-behavior.html">

...

Polymer({
    is: 'custom-element',
    behaviors: [
        Polymer.IronImageBehavior
    ]
});

'preload' property documentation truncated.

Currently reads:

When true, any change to the src property will cause the placeholder image to be shown until the

How to give the image style to fit the div ?

I want the iron-image to work exactly what img do...

<img src="[[item.image.url]]" style='height: 100%; width: 100%; object-fit: contain'>

I tried with

<iron-image src="[[item.image.url]]" style='height: 470px; width: 836px;'  sizing="cover" preload fade></iron-image>

It's perfectly fine in desktop browser but in my mobile is matched .. see the sample image below

So what to do with mobile ?

Github repo: http://github.com/rajasimon/techienews

How to set 'alt' and 'title' attribute of <img> tag rendered locally for SEO purpose?

I am writing a website using Polymer. It is using some images on almost all pages. All images are rendered using tag.

In order to provide proper HTML content to Search engine bots, we are going to setup Prerender.io proxy.

But, I think that won't be sufficient in case of images. As, using won't set 'alt' and 'title' attribute of rendered as local dom.

So, I request you to add support for those 2 attributes.

Mobile A11y Testing 11/1

These images don't seem to have labels. I can't access them with Talkback, I can only access the text above them.

How to set `border-radius`

Hello,

At the moment I've got my code such that an image is shown, however since the sizing is set, the border radius does not apply to the image. Is there any solution to this?

Unable to make to make an iron-image responsive if it is loaded asynchronously

Hi, I've been suggested to post this as an issue.
I'm not able to make an iron-image responsive if it is loaded asynchronously (e.g. from an iron-ajax call)... the standard <img> tag works though.

Here's an example (the first image is an <img>, the second is an <iron-image>): http://jsbin.com/funigo/2/edit?html,output

src property binding

Doesn't seem to support this type of property binding: <iron-image src="/images/{{image}}.png"
How come? Then I try like this...

<iron-image src="{{srcPath}}"

    Polymer({
      is: 'ui-section',
      created: function() {
        this.srcPath = '/images/' + this.image + '.png';
      },
      properties: {
        srcPath: String,
        image: {
          type: String,
          readOnly: true
        },
...

What is the pattern for this simple scenario? Please include better docs. Thanks.

polymerelements / iron-image Goto Github PK

iron-image's Introduction

<iron-image>

Usage

Installation

In an HTML file

In a Polymer 3 element

Contributing

Installation

Running the demo locally

Running the tests

iron-image's People

Contributors

Stargazers

Watchers

Forkers

iron-image's Issues

Expected outcome

Actual outcome

Steps to reproduce

Description

Expected outcome

Actual outcome

Steps to reproduce

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Note: this is with using placeholder="data:image/jpeg;base64,... base64 image

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Description

Expected outcome

Actual outcome

Live Demo

Description

Expected outcome

Actual outcome

Live Demo

Description

Steps to reproduce

Description

Expected outcome

Actual outcome

Proposed solution

Browsers Affected

Description

Desired outcome

Actual outcome

Live Demo

Steps to reproduce

Conversation

Description

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Description

Expected outcome

Recommend Projects

Note: this is with using `placeholder="data:image/jpeg;base64,...` base64 image