How to use img src from vuex by looping

Question

I want to call the image source from vuex by looping it in div
I mean like this.

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

this is data.js

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

this is state.js

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

this is index.js

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

import state from './state'

Vue.use(Vuex)

export default new Vuex.Store({state})

thank you

I think you want :src="image" and :alt="index". Put a : out front and get rid of the this. — skirtle
– skirtle, Commented Apr 18, 2020 at 12:05
hello skirtle, i tried it, but it still doesn't work, but it's not error, it just show the alt text with no picture — Hakim
– Hakim, Commented Apr 18, 2020 at 12:08
Inspect the element in the developer tools to see what value the src ends up with. — skirtle
– skirtle, Commented Apr 18, 2020 at 12:09

user13278024 · Accepted Answer · 2020-04-18 12:14:45Z

1

You're missing the double quotes when binding the attribute. Remember that for local images you need to places them into the folder public/assets, then you can change your URLs to assets/your-image-name.jpg. More informations about static assets in Vue.JS can be found 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>

answered Apr 18, 2020 at 12:14

user13278024

Sign up to request clarification or add additional context in comments.

3 Comments

Hakim Over a year ago

thank you federico-dondi, i will try to follow the link

Hakim Over a year ago

Thank you federico-dondi, it solved, my problem was in data.js, and i must use a bind

user13278024 Over a year ago

Happy to be helpful.

Collectives™ on Stack Overflow

How to use img src from vuex by looping

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related