Question

我正在使用 Vue + Vuetify ，并且尝试在第一列中添加图片。

表格模板代码

distributionUrl=https\://services.gradle.org/distributions/gradle-4.8-all.zip

表格脚本代码

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="search"
  light
>
  <template slot="items" slot-scope="props">
    <td><img :src="props.item.name" style="width: 50px; height: 50px"></td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>
  </template>
  <v-alert slot="no-results" :value="true" dir="rtl" color="error" icon="warning">
    {{ PRODUCTS_TABLE_TEXT.NO_RESULT }} "{{ search }}"
  </v-alert>
</v-data-table>

我试图做的事

我试图在 name 变量中添加 HTML图片代码，如下所示：

data () {
  return {
    //TEXT
    PRODUCTS_TABLE_TEXT: products_table_text,
    //TABLE DATA
    search: '',
    headers: [
      {
        text: products_table_text.columns.IMAGE,
        align: 'center',
        sortable: false,
        value: 'image'
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' }
    ],
    desserts: [
      {
        value: false,
        name: '1.jpg',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%'
      },
    ]
  }
}

但是它只是将HTML打印为文本，而没有呈现它。

Answer 1

我也堆了几分钟，但这是在vuetify数据表中使用图像的简单方法表格模板代码

  <template>
 <v-layout row wrap>
      <v-flex xs12>
        <v-data-table :headers="headers" :items="carts" class="elevation-0">
          <template v-slot:item.image="{ item }">
            <div class="p-2">
              <v-img :src="item.image" :alt="item.name" height="100px"></v-img>
            </div>
          </template>
        </v-data-table>
      </v-flex>
    </v-layout>
<template/>

表格脚本代码

  <script>
import { mapGetters } from "vuex";

export default {
    data() {
    return {
      user: null,
      isAvalibel: false,
      headers: [
        { text: "Image", value: "image", sortable: false },
        { text: "Product Name", value: "name", sortable: false },
      ]
    };
 computed: {
    ...mapGetters(["carts"])
  },

Answer 2

在模板编译期间，编译器可以将某些属性（例如src URL）转换为require调用，以便可以通过webpack处理目标资产。例如，<img src="./foo.png">将尝试在文件系统上找到文件./foo.png，并将其作为捆绑软件的依赖项包含。

因此，对于动态属性src，

<td> <img :src="require('./assets/products-images/' +props.item.name)"> </td>

Answer 3

实际上，您可以使用多种方法在Vue应用程序/模板中插入图像：

1）（这就是代码所需要的）实际上，使用require函数将由Webpack处理并将图像映射到其资源。

<img :src="require('./assets/products-images/' + props.item.name)">

请遵循以下github讨论以获取更多说明：

https://github.com/vuejs-templates/webpack/issues/126

2）另一种方法是从服务器读取图像为base64并在您的Vue应用程序内对其进行处理：

<img v-bind:src="'data:image/jpeg;base64,'+imageBytes" />

Vue + Vuetify数据表第一列图像

3 个答案: