Immagine statica src nel modello Vue.js

Question

Il componente Vue contiene alcune immagini. Voglio caricare pigro in un secondo momento, quindi devo prima impostare l'immagine delle immagini su una piccola immagine.

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

mi dà un sacco di errori, come:

[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 = {// ... costruzione: { assetsPublicPath: '/ ', assetsSubDirectory: 'static' }}

Answer 1

Se si desidera associare una stringa per i src ani Bute, si dovrebbe avvolgere l'apici:

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

IMO non c'è bisogno di legare una stringa, è possibile utilizzare il modo più semplice:

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

controllare un esempio per il precarico immagine qui: http://codepen.io/pespantelis/pen/RWVZxL

Answer 2

@Pantelis risposta in qualche modo mi ha indirizzato a una soluzione per un simile malinteso. Un progetto di bacheca su cui sto lavorando deve mostrare un'immagine opzionale. Stavo cercando di ottenere lo src = imagefile per concatenare un percorso fisso e una stringa variabile del nomefile fino a quando ho visto il bizzarro uso delle virgolette "" ":-)

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