Statyczne zdjęcie src w szablonie Vue.js

Question

Mój komponent Vue zawiera obrazy. Chcę wczytać się później, więc najpierw muszę ustawić src obrazów na mały obraz.

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

daje mi kilka błędów, jak:

[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 = { // ... build: { assetsPublicPath: „/ ” assetsSubDirectory: 'statyczne' } }

Answer 1

Jeśli chcesz powiązać ciąg do src attri Bute, należy owinąć ją na apostrofami:

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

IMO nie trzeba powiązać ciąg, można użyć prosty sposób:

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

Sprawdź przykładowe o napięcia wstępnego obrazu tutaj: http://codepen.io/pespantelis/pen/RWVZxL

Answer 2

@Pantelis w jakiś sposób skierowała mnie do rozwiązania podobnego nieporozumienia. Projekt tablicy ogłoszeń, nad którym pracuję, musi wyświetlać opcjonalny obraz. Próbowałem pobrać src = imagefile, aby połączyć stałą ścieżkę i ciąg zmiennej nazwy pliku, dopóki nie zobaczyłem dziwacznego użycia "" "cytatów :-)