Исходный код img передан в дочерний компонент Vue Js

Итак, я играю с 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"

image vue.js components react-props
person Pedro Sturmer    schedule 07.06.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

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

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

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

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

подробный

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

стенография

<img :src="url" />
person Pedro Sturmer    schedule 07.06.2018