Vue + 데이터 테이블 첫 번째 열 이미지

Vue + 데이터 테이블 첫 번째 열 이미지

나는 Vue + Vuetify를 사용하고 있는데 첫 번째 열에 이미지를 추가하려고 해.

테이블 템플릿 코드

<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>

테이블 스크립트 코드

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 이미지 코드를 추가하려고 노력했다.

name: '<img src="./../../assets/products-images/1.jpg" style="width: 50px; height: 50px">'

그러나 그것은 HTML을 텍스트로 인쇄했을 뿐 렌더링하지 않았다.

나도 몇 분 동안 쌓이지만, 이렇게 하면 데이터 테이블 템플릿 코드에서 이미지를 쉽게 사용할 수 있다.

  <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"])
  },

템플릿 컴파일러는 템플릿 컴파일 중에 src URL과 같은 특정 속성을 요구 호출로 변환하여 대상 자산을 웹 팩으로 처리할 수 있다.예를 들면<img src="./foo.png">파일을 찾으려고 할 것이다../foo.png파일 시스템에 포함시키고 번들의 종속성으로 포함시키십시오.

동적 특성 src의 경우

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

실제로 Vue 앱/템플릿에 이미지를 삽입하는 데 사용할 수 있는 방법은 여러 가지가 있다.

1) (이것이 코드에 필요한 것이다) 사용require기능 사실 이것은 웹팩에 의해 처리될 것이고, 이미지를 자원에 매핑할 것이다.

<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" />

만약 당신이 당신의 서버 이미지를 공리와 함께 사용하고 그것들을 행에 표시하기를 원한다면, 이것은 또한 효과가 있다.

<template v-slot:item.image="{ item }">
    <img v-bind:src="`/${item.image}`" style="width: 50px; height:50px">
    </v-img>
</template>

참조URL: https://stackoverflow.com/questions/51951261/vue-vuetify-data-table-first-column-image