javascript - 如何通过循环使用vuex中的img src

Question

我想通过在 div 中循环来从 vuex 调用图像源
我的意思是这样。

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

这是 data.js

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

这是state.js

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

这是index.js

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

import state from './state'

Vue.use(Vuex)

export default new Vuex.Store({state})

谢谢

Answer 1

绑定(bind)属性时缺少双引号。请记住，对于本地镜像，您需要将它们放入文件夹 public/assets 中，然后您可以将 URL 更改为 assets/your-image-name.jpg。更多关于Vue.JS中静态资源的信息可以参见here .

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