如何使用路径在 vuetify 数据表中显示图像

Question

所以我有这个数组项：

[
  {
    "name": "user language check dates in different language",
    "tag": "@DHRD-52484",
    "status": "passed",
    "refimages": [
      "/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/1.png",
      "/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/2.png",
      "/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/3.png",
      "/captures/ref_01_03_2022_17_05_21/@DHRD-52484/user language check dates in different language/4.png"
    ],
    "testimages": [
      "/captures/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/1.png",
      "/captures/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/2.png",
      "/captures/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/3.png",
      "/captures/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/4.png"
    ],
    "resultimages": [
      "/VisualTests/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/1.png",
      "/VisualTests/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/2.png",
      "/VisualTests/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/3.png",
      "/VisualTests/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/4.png"
    ]
  }
]

我一直在尝试 table 使用 vuetify，每一行代表图像的索引、refimage、testimage 和结果图像到目前为止，这是我的代码：

<template>
  <v-app>
    <app-navbar />

    <v-main>
      <h3>
        test {{ $route.params.name }}, {{ $route.query.status }},{{
          $route.query.tag
        }}
      </h3>
      <h3>{{ imagesref }}</h3>
      <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>

    </v-main>
  </v-app>
</template>

<script>
import appNavbar from "../../../components/appNavbar.vue"
import axios from "axios"
export default {
  components: { appNavbar },
  name: "App",
  data() {
    return {
      items: [],
      imagesref: [],
      imagestest: [],
      imagesresult: [],
      headers: [
        {
          text: "index",
          align: "start",
          sortable: false,
          value: "index",
        },
        { text: "reference image", value: "refimages" },
        { text: "test image", value: "test" },
        { text: "result image", value: "result" },
      ],
    }
  },
  async created() {
    try {
      const res = await axios.get(`http://localhost:3004/tests`, {
        params: { name: this.$route.params.name },
      })
      this.items = res.data
      this.imagesref = res.data[0].refimages
      this.imagestest = res.data[0].testimages
      this.imagesresult = res.data[0].resultimages
    } catch (error) {
      console.log(error)
    }
  },
}
</script>

<style lang="scss" scoped>
</style>

我尝试将 refimages、testimages 和 resultimages 数组保存在 3 个变量中，但我仍然不知道如何并行迭代这 3 个数组并使用 img 标签显示路径中的图像

Answer 1

我找到了解决您的问题的方法，为了更好地解释它，我将其分成一些步骤:

step1: Test the img urls

首先在组件上放置一个 <img> 标签，以测试您在数据中定义的 urls 是否实际工作：

<img width="50" src="../assets/images/1.png">

我的 assets 目录中有 1.png 图片。如果没有显示图像，则表示您的 url 地址（例如 /captures/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language/1.png）有问题。尝试解决该问题以继续。

step2: Store data in "json" file

之后，如果您的图像没有任何问题 urls，您必须将数据粘贴到保存在 public 目录中的 json 文件中。这里我称它为 dataMe.json 并将这些样本数据放在上面。你可以放自己的数据：

[
  {
    "name": "user1",
    "tag": "@DHRD-52484-1",
    "status": "passed",
    "imgUrl": "1.png"
  },
  {
    "name": "user2",
    "tag": "@DHRD-52484-2",
    "status": "passed",
    "imgUrl": "2.png"
  },
  {
    "name": "user3",
    "tag": "@DHRD-52484-3",
    "status": "passed",
    "imgUrl": "5.png"
  }
]

此时，如果您在浏览器地址栏中粘贴 http://localhost:8080/dataMe.json（而不是 8080，使用您自己的端口号），您应该会看到以下数据在您浏览器的文件中。

step3: Change your template and script codes

如果你想在 vuetify table 中迭代你的数据，你应该 而不是 分离数据。所有来自你的 axios 请求的数据必须在你的 vue 组件的 items 数据中。这是我的组件的代码：

<template>
  <v-app>
    
    <v-main>
      <v-data-table
          :headers="headers"
          :items="items"
      >
        <!-- This template is used to have custom html elements in your specific column of the table -->
        <template v-slot:item.imgUrl="{ item }">
          <!-- You can uncomment the line below to see the actual item data. Also you can use 'v-for' or 'v-if' or other vue capabilities, if your item data is more complex.  -->
          
<!--          <span>{{item}}</span>-->
          <img width="50" :src="require(`../assets/images/${item.imgUrl}`)">
        </template>
      </v-data-table>
    </v-main>
  </v-app>
</template>

<script>

import axios from "axios"
export default {
  name: "DataView",
  data() {
    return {
      items: [],
      // imagesref: [],
      // imagestest: [],
      // imagesresult: [],
      headers: [
        { text: "name", value: "name" },
        { text: "tag", value: "tag" },
        { text: "status", value: "status" },
        { text: "image", value: "imgUrl" },
      ],
    }
  },
  async created() {
    try {
      // replace the port number with your own port number
      const res = await axios.get('http://localhost:8080/dataMe.json');
      console.log(res.data);
      this.items = res.data;
      // this.imagesref = res.data[0].refimages
      // this.imagestest = res.data[0].testimages
      // this.imagesresult = res.data[0].resultimages
    } catch (error) {
      console.log(error)
    }
  },
}
</script>

<style scoped>

</style>

如你所见，我使用 v-data-table Slots capability to handle the image problem. With this capability of vuetify you can add or replace custom html elements to built-in vuetify components. Also see this example 来更好地理解 v-data-table 组件中 Slots 的用法。

我认为有必要提及的最后一个技巧是不要将图像的整个地址放入json 数据文件中。只放入变量部分（例如 1.png 和 2.png 等），对于重复部分（例如 /captures/test_07_03_2022_10_13_48/@DHRD-52484/user language check dates in different language）将其放入:src="require(... 你的 vue 模板代码的一部分。

这是适用于我的示例数据的解决方案。您可能需要添加更多列或更改 table 的 headers 或 items 部分，以使用您自己的数据获得所需的 table。

Answer 2

感谢@hamid-davodi 的解决方案！我也尝试找到自己的，这是我想出的：

    <template>
      <v-app>
               
        <app-navbar />
    
        <v-main>
     
          <h3>
            test {{ $route.params.name }}, {{ $route.query.status }},{{
              $route.query.tag
            }}
          </h3>
          <h3>{{ imagesref }}</h3>
      
            <v-data-table
        :headers="headers"
        :items="imagesref"
        :items-per-page="5"
        class="elevation-1"
      >
      <template v-slot:[`item.index`]="{ index }">
         
            {{index+1}}
      </template>
      
      <template v-slot:[`item.ref`]="{ index }">
    
            <v-img :src="imagesref[index]" max-width="750" max-height="750" @click="expand"  />
      
      </template>
       <template v-slot:[`item.test`]="{ index }">
         
            <v-img :src="imagestest[index]" max-width="750" max-height="750" />
    
      </template>
         <template v-slot:[`item.res`]="{ index }">
         
            <v-img :src="imagesresult[index]" max-width="750" max-height="750" />
    
      </template>
      </v-data-table>
    
    
        </v-main>
     
      </v-app>
    </template>
    
    <script>
    import appNavbar from "../../../components/appNavbar.vue"
    import axios from "axios"
    export default {
      components: { appNavbar },
      name: "App",
      data() {
        return {
          exp:false,
          items: [],
          imagesref: [],
          imagestest: [],
          imagesresult: [],
                  headers: [
              { text: 'index',value: 'index',sortable:false},
              { text: 'Imagesref', value: 'ref',sortable:false },
              { text: 'Imagestest', value: 'test',sortable:false },
              { text: 'Imagesresult', value: 'res',sortable:false },
              { text: 'Scrubber', value: '',sortable:false },
            ]
        }
      },
      async created() {
        try {
          const res = await axios.get(`http://localhost:3004/tests`, {
            params: { name: this.$route.params.name },
          })
          this.items = res.data
          this.imagesref = res.data[0].refimages
          this.imagestest = res.data[0].testimages
          this.imagesresult = res.data[0].resultimages
        } catch (error) {
          console.log(error)
        }
      },
      methods:{
        expand(){
          this.exp= !this.exp;
    
        }
      }
    }
    </script>
    
    <style  scoped>

    </style>

由于图像的路径在数组中是有序的，我使用 v-slot 和索引对象来在正确的行中显示每个图像。我使用的是nuxtjs，所以我把图片保存在static文件夹中，这样我就不需要更改路径了。

我希望这可以帮助 vue/vuetify 的初学者。

如何使用路径在 vuetify 数据表中显示图像

How to Display images in vuetify datatable using paths

vue.js

vuejs2

vuetify.js

step1: Test the img urls

step2: Store data in "json" file

step3: Change your `template` and `script` codes

如何使用路径在 vuetify 数据表中显示图像

How to Display images in vuetify datatable using paths

vue.js

vuejs2

vuetify.js

step1: Test the img urls

step2: Store data in "json" file

step3: Change your template and script codes

step3: Change your `template` and `script` codes