がVue.js

Question

Relevant codepen

でダイナミックIMGのパスを生成する私は、動的画像パスを生成しようとしているが、私は何かが欠けています。 1つまたは複数の理由により、このメソッドはimgタグのsrc属性で実行されていません。関連JS

<div id="app"> 

    <component v-bind:fruits="fruits" is="fruits-list"></component> 

</div> 

<template id="fruits-template"> 
    <div> 
    <ul> 
     <li v-for="fruit in fruits"> 
     {{ fruit }} 
     <img src="imgName(fruit)" /> 
     </li> 
    </ul> 
    </div> 
</template> 

そしてここにある：ここで

はHTMLです

Vue.component('fruits-list', { 
    template:'#fruits-template', 
    props: ['fruits'], 
    methods: { 
    imgName: function(fruit){ 
     var imgPath = 'assets/images/' + fruit + '.jpg'; 
     return imgPath; 
    } 
    } 
}) 

new Vue({ 
    el: '#app', 
    data() { 
    return { 
     fruits: ['apple','pear','strawberry', 'peach'] 
    } 
    } 
}) 

私はまた、結合しようとしましたsrcからimgタグのように：

<img :src="getImageUrl(fruit)" /> 

しかし、それはまったくレンダリングされません。このようなインスタンスでメソッドや計算されたプロパティを使用する方が良いでしょうか？

Answer 1

のhtmlでこれを試してみてください：

<img v-bind:src=imgName(fruit) /> 

私はあなたのペンで、私はこのURLに失敗した要求を見て、他の果物のために同様のことを変更した場合：

Request URL:https://codepen.io/boomerang/iFrameKey-9b0f86ca-8c55-3b83-2d9c-3367ada2ac69/assets/images/apple.jpg

あなたはそれらの果物のイメージがありますか？ imgNameメソッドを次のように変更し、リンゴのイメージをペン内部にロードしました。

imgName: function(fruit){ 
    if (fruit === 'apple') { 
    return 'https://bestapples.com/wp-content/uploads/2015/10/apple-varieties.jpg' 
    } else { 
    var imgPath = 'assets/images/' + fruit + '.jpg'; 
    return imgPath;   
    } 

}