Источник img передан на подпорку дочернему компоненту Vue Js

Question

Итак, я играю с Vue Js и в настоящее время испытываю некоторые проблемы с отображением изображения на дочернем компоненте, поэтому вот как это выглядит:

Родительский компонент:

<list>
  <post name="post 1" image="somePath"/>
  <post name="post 2" image="somePath"/>
</list>

на дочернем компоненте мы получили

<post>
 <p> {{name}} </p>
 <img src={{somePath}} />
</post>

Я пробовал несколько способов с require и другими методами ... Ни один из них до сих пор не работал ... Есть предложения?Также вот как выглядит мой путь img

"@/assets/web/mock/Phonebeats.png"

Answer 1

Просто найдите способ сделать это!:)

По сути, при начальном рендеринге, до того, как vuejs получит шанс даже отрендерить ваш код, браузер видит это:

<img src="{{ url }}" />

Затем браузер пытается загрузить {{url}}и завершается неудачно с 404. Вам необходимо использовать новый синтаксис attr (vue 1.0):

подробный

<img v-bind:src="url" />

сокращение

<img :src="url" />