生成動態IMG路徑在Vue.js

我試圖生成動態圖像路徑，但我失去了一些東西。由於某種原因，該方法未在img標記的src屬性上執行。

下面是HTML：

<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>

這裏是相關的JS：

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)" />

但是這根本就沒有任何東西可以呈現。在這樣的實例中使用方法還是計算屬性會更好嗎？

來源

2017-09-30 Modermo

您在哪裏定義了getImageUrl方法？ – Tom

使用方法應該很好。試着參考這個答案： https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working – Tom

在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;   
    } 

}

來源

2017-09-30 01:31:12 clk

嘿，是的，圖像並不是要在筆中實際渲染。我只需要弄清楚如何生成圖像路徑。這工作，所以謝謝:) – Modermo

生成動態IMG路徑在Vue.js

回答

相關問題