我的图像标记内的vue插值为src:“{{image}}”[重复]

Question

我正在尝试将图像url动态传递给我的vue应用程序，但它似乎不起作用，所以现在我想知道是否有可能这样做。。是的，请告诉我在Vue/Vuetify中是否可以这样做

<v-img
  class="white--text align-end"
  height="200px"
  src="{{ book.imageUrl }}"
>

Answer 1

你试过这个吗？

:src="book.imageUrl"

我认为您不能使用{{var}}将变量传递给Vue组件的属性

Answer 2

是的，这是可能的，只是语法有错误。

假设使用：src=而不是普通的src

:src="book.imageUrl"

属性前面的冒号允许框架将其视为工作代码。

非冒号只会导致{{book.imageUrl}}作为普通字符串

Answer 3

正如KaelWD在本期中建议的那样，您应该在图像网址中使用要求（）。

<v-img
  class="white--text align-end"
  height="200px"
  :src="require(`${book.imageUrl}`)"
/>