Vue Js 在引号中显示对象

Question

我遇到了一个问题。我有一组“课程”，其中存储了 5 个对象。他们每个人都有参数（url）。示例：

Lessons: [
        {
          url: "../assets/Math.png",
          Title: "Lesson",
          Subject: "Math",
          Location: "London",
          Price: "£100",
          Spaces: 5,
        },

现在我用 v-for 来显示它们中的每一个，一切正常，除了我不知道如何显示我在 /assets 文件夹中的图像。我试过简单的方法 img src=" {{ lesson.url }}" 和这个：

<div class="col-md-6 col-lg-3" v-for="lesson in Lessons" :key="lesson.id">
  <div class="card" >
   <img src="'${lesson.url}'" alt="" class="card-img-top img-fluid">

谁能建议我怎么做？

Answer 1

我相信你想像这样绑定 src 属性：

<img :src="lesson.url" ...>

Answer 2

要以这种方式使用图像路由，您必须首先导入它们，以便 Webpack 能够从数据中处理它们：

import mathImg from  "../assets/Math.png"

// in your data
Lessons: [
        {
          url: mathImg, // use the import name
          Title: "Lesson",
          Subject: "Math",
          Location: "London",
          Price: "£100",
          Spaces: 5,
        }
]

在您的模板中

<img :src="Lessons.url" />

Answer 3

我猜你忘了 :

  <img :src="`${lesson.url}`" alt="" class="card-img-top img-fluid">

你也可以

 <img :src="lesson.url" alt="" class="card-img-top img-fluid">

Vue Js 在引号中显示对象

Vue Js displaying object in qoutes

javascript

documentation

for-loop

vue.js