vue-material.js?ec92:6 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

[xrr2016]

my code

  <swiper :options="swiperOption" ref="mySwiperA">
          <swiper-slide v-for="story of topStories">
              <md-card>
                <md-card-media-cover md-text-scrim>
                  <md-card-media md-ratio="16:9">
                    <img :src="story.image | imageUrlPrefix">
                  </md-card-media>
                  <md-card-area>
                    <md-card-header>
                      <div class="md-title">{{ story.title }}</div>
                    </md-card-header>
                  </md-card-area>
                </md-card-media-cover>
              </md-card>
          </swiper-slide>
          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>

I dont understand why it happened,and swiper did not render.

[marcosmoura]

This is because your image is not on the same domain. The getImageData method rely on a Canvas solution, and, for security, the browser don't allow reading images from external sources. I will fix that. Related to #424

[Andkoo]

I am loading an image from my src/assets/images folder, yet I still get the same error. This is so frustrating.

[Samuell1]

Same error if i testing on localhost, Its fix on the way?

[johannkm]

Same error with an image from src/assets

[gonzaloplaza]

Same error, just when trying to put the card with image inside a md-gutter

However, Image and card are working outside the md-gutter layout

any idea? @marcosmoura

[iboying]

The issue has fixed when I romove md-ratio paramete from md-card-media.