さまざまな未知の次元の画像をコンシューマに表示する

Question

Spotify APIを使用してトップのトラックとアーティストにクエリを実行し、これらを返信してユーザーに表示する小さなWebアプリケーションを構築しています。

Bootstrapパネルでは、各トラックやアーティストに見出しのトラックやアーティストの名前と本文の関連イメージが表示されています。

トラックの場合は、APIレスポンスで返されるイメージがすべて同じディメンションであるように見えるため、これは効果的です。

アーティストの場合、返される画像はすべて、トラックとは異なる可能な次元によって異なります。

イメージアレイで返されたイメージの1つを使用し、イメージのheightとを100％に設定することで、この問題を回避しようとしましたが、これはすべてのイメージで機能しません画像が低解像度であり、スタイリングによって吹き飛ばされている。

これは、パネルの私が持っているコードです：

<div class="col-md-4" v-if="type == 'artists'" v-for="track in tracks"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">@{{ track.name }}</div> 
     <div class="panel-body"><img :src="track.images[0].url" :alt="track.name" class="img-responsive center-block" style="height: 100%; width: 100%"/></div> 
    </div> 
</div> 

以下はimage、アレイ内で返すことができるもののいくつかの例です：

"images":[ 
    { 
     "height":640, 
     "url":"https://i.scdn.co/image/64758843803a4cbda8c0413cb06dc896d74a0964", 
     "width":640 
    }, 
    { 
     "height":320, 
     "url":"https://i.scdn.co/image/0f784b6a392e65e1ac637c487b27437ba7861198", 
     "width":320 
    }, 
    { 
     "height":160, 
     "url":"https://i.scdn.co/image/80117df47ffed7d7b0cf490edc950cb285a226e7", 
     "width":160 
    } 
] 

"images":[ 
    { 
     "height":640, 
     "url":"https://i.scdn.co/image/6a299fe9d66f3036bb0b22a458d38f662655b559", 
     "width":640 
    }, 
    { 
     "height":300, 
     "url":"https://i.scdn.co/image/c9b1fe49b9139cc42090a8b045678ae9a323c400", 
     "width":300 
    }, 
    { 
     "height":64, 
     "url":"https://i.scdn.co/image/476d0a6971a8e46a411dc2a5382b20176e0c1a23", 
     "width":64 
    } 
] 

"images":[ 
    { 
     "height":666, 
     "url":"https://i.scdn.co/image/dd1ea0b4e68b25e2a82de61b03ee3933be266475", 
     "width":1000 
    }, 
    { 
     "height":426, 
     "url":"https://i.scdn.co/image/b013b96bbe25ba13619f3d18f29f8dc999cdea7f", 
     "width":640 
    }, 
    { 
     "height":133, 
     "url":"https://i.scdn.co/image/67636ab4283dc8783b60dd0ada9ade16300e3417", 
     "width":200 
    }, 
    { 
     "height":43, 
     "url":"https://i.scdn.co/image/971cc938303fbebd8908ebfc30a9f759679efb14", 
     "width":64 
    } 
] 

私はVue.jsを使用していますAPIを照会する私のアプリケーションで。

返される解像度がわからないときに、イメージを適切かつ一貫してレンダリングする方法を教えてください。 これを行うのに役立つCSSマジックやJavaScriptがありますか？

Answer 1

私はVueとCSSの組み合わせを使用します。 CSSは画像を背景としてbackground-size: coverに適用し、vueはテンプレート内でbackground-imageを動的に設定します。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     "images": [{ 
 
     \t "name": 'foo', 
 
      "height": 640, 
 
      "url": "https://i.scdn.co/image/64758843803a4cbda8c0413cb06dc896d74a0964", 
 
      "width": 640 
 
     }, { 
 
     \t "name": 'bar', 
 
      "height": 320, 
 
      "url": "https://i.scdn.co/image/0f784b6a392e65e1ac637c487b27437ba7861198", 
 
      "width": 320 
 
     }, { 
 
     \t "name": 'baz', 
 
      "height": 160, 
 
      "url": "https://i.scdn.co/image/80117df47ffed7d7b0cf490edc950cb285a226e7", 
 
      "width": 160 
 
     }] 
 
    }, 
 
})

.bg-image { 
 
    background-size: cover; 
 
    display: block; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-position: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <div class="container"> 
 
     <div :class="{ 
 
       'col-xs-4': image.width <= 200, 
 
       'col-xs-6': image.width > 200 && image.width <= 400, 
 
       'col-xs-12': image.width > 400, 
 
      }" v-for="image in images"> 
 
      <div class="panel panel-default"> 
 
       <div class="panel-heading">{{ image.name }}</div> 
 
       <div class="panel-body"> 
 
        <i :style="{ 'background-image': `url(${image.url})` }" class="bg-image"></i> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

あなたは、APIによって返された幅または高さに基づいて動的に適用されるクラスを変更することができます。私はこれがBootstrapのグリッドでどのように機能するかを示しました。あなたのアプリ内でもっとエレガントなことができることを確かめてください。

Answer 2

ディメンションを知らなくても、各カード/パネルビューの画像サイズに一貫性を維持する必要がある場合は、その延伸により混乱画像を意志ハードコーディングされた高さや幅を設定した場合、

問題は、あります。これを解決する

1つのオプションは、お好みの高さと幅EXで画像のタグを維持されています* 250 300

.thumbnail{ 
      width : 300px; 
      height: 250px; 
      background-image : url('path/image.jpg'); 
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: cover; 
    } 

そして、デフォルトでは

Answer 3

のようにクラスを追加し、サーバー上のイメージを持っています透明なgit（png）、または「Loading ...」（または読み込み中のアニメーションGIFさえ）のようなコンテンツを持つ画像である可能性があります。動画像については 、あなたのAJAX呼び出しからそれらを取得するときに2件の観光名所：ゼロ

へ

1. 変更静止画像の不透明度は、動的画像のURLを使用するには、（「-image-SRCそれを呼び出すことができます - "）をCSSで何かを使って のように：

   。パネル本体{ 背景画像：URL（-image-src-）; background-size：cover; }