Как использовать img sr c из vuex с помощью цикла

Question

Я хочу вызвать источник изображения из vuex, зациклив его в div Я имею в виду вот так.

<div v-for="({image}, index) in allData" :key="index">
  <img src="this.image" alt="this.index"/>
</div>

<script>
  import {mapState} from 'vuex';
  export default{
    computed: {
      ...mapState([
        'allData'
      ])
    }
  }
</script>

это данные. js

export default [
  {image: "./image/image1"},
  {image: "./image/image2"},
  {image: "./image/image3"}
]

это состояние. js

import data from './data'
export default {data};

это индекс. js

import Vue from 'vue'
import Vuex from 'vuex'

import state from './state'

Vue.use(Vuex)

export default new Vuex.Store({state})

спасибо

Answer 1

Вы пропускаете двойные кавычки при связывании атрибута. Помните, что для локальных изображений вам нужно поместить их в папку public/assets, тогда вы можете изменить свои URL-адреса на assets/your-image-name.jpg. Более подробную информацию о состоянии активов c в Vue. JS можно найти здесь .

<template>
   <div v-for="({ image }, index) in allData" :key="index">
      <img 
         :src="image" 
         :alt="index"
      />
   </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
   computed: {
      ...mapState(['allData'])
   }
}
</script>