2016-06-05 4 views
11

मेरा व्यू घटक में कुछ छवियां हैं। मैं बाद में आलसी लोडिंग करना चाहता हूं, इसलिए मुझे छवियों के स्रोत को एक छोटी छवि में सेट करना होगा, पहले।Vue.js टेम्पलेट में स्टेटिक छवि src

<template> 
     <div v-for="item in portfolioItems"> 
      <a href="#{{ item.id }}"> 
       <img 
        data-original="{{ item.img }}" 
        v-bind:src="/static/img/clear.gif" 
        class="lazy" alt=""> 
      </a> 
     </div> 
</template> 

मुझे त्रुटियों की एक गुच्छा देता है, जैसे:

[Vue warn]: Invalid expression. Generated function body: /scope.static/scope.img/scope.clear.gif vue.common.js:1014[Vue

[Vue warn]: Error when evaluating expression "/static/img/clear.gif": TypeError: Cannot read property 'call' of undefined (found in component:)

webpack.config.js: module.exports = { // ... निर्माण: { assetsPublicPath: '/ ', assetsSubDirectory:' स्थिर ' } }

उत्तर

21

आप src अत्री के लिए एक स्ट्रिंग बाध्य करने के लिए चाहते हैं bute, आप इसे एकल उद्धरण पर लपेट चाहिए:

<img v-bind:src="'/static/img/clear.gif'"> 
<!-- or shorthand --> 
<img :src="'/static/img/clear.gif'"> 

IMO आप एक स्ट्रिंग बाध्य करने की जरूरत नहीं है, तो आप आसान तरीका इस्तेमाल कर सकते हैं:

<img src="/static/img/clear.gif"> 

चेक छवि प्रीलोड के बारे में यहाँ एक उदाहरण: http://codepen.io/pespantelis/pen/RWVZxL

5

@ पैंटेलिस ने मुझे किसी भी तरह की गलतफहमी के समाधान के लिए प्रेरित किया। एक संदेश बोर्ड प्रोजेक्ट जो मैं एक वैकल्पिक छवि दिखाने के लिए जरूरतों पर काम कर रहा हूं। मैं src = imagefile को एक निश्चित पथ और परिवर्तनीय फ़ाइल नाम स्ट्रिंग को संयोजित करने की कोशिश कर रहा था जब तक कि मैंने "" उद्धरण :-)

<template id="symp-tmpl"> 
    <div> 
    <div v-for="item in items" style="clear: both;"> 
     <div v-if="(item.imagefile !== '[none]')"> 
     <img v-bind:src="'/storage/userimages/' + item.imagefile"> 
     </div> 
     sub: <span>@{{ item.subject }}</span> 
     <span v-if="(login == item.author)">[edit]</span> 
     <br>@{{ item.author }} 
     <br>msg: <span>@{{ item.message }}</span> 
    </div> 
    </div> 
</template> 
का क्विर्की उपयोग देखा