A guide on utilizing the img src attribute from vuex through a loop

I'd like to retrieve the image source from vuex and display it by looping through a div
Here's what I have in mind:

<div v-for="({image}, index) in allData" :key="index">
  <img :src="image" :alt="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})

https://i.sstatic.net/oUAAN.png

Thank you!

Answer №1

Make sure to include the double quotes when binding attributes in your code. Remember, for local images, they should be placed in the folder public/assets. Once done, you can update the URLs to assets/your-image-name.jpg. For more details on handling static assets in Vue.JS, refer to this link.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do we need to pair Meteor with Angular?

As an experienced Angular developer, I've found that Angular is a valuable tool for creating dynamic single-page applications. However, my current exploration into Meteor has piqued my interest even further. Meteor offers unique capabilities, such as ...

AJAX Showdown: Comparing jQuery's AJAX API to JavaScript's XHR

tl;dr: I have two different scripts that appear to be identical, but one works while the other does not. Why is this? Let me provide some context for this post. I am working on creating an image uploading form that utilizes AJAX requests to generate a dyn ...

Interactive HTML Table - Capture Modified Fields

I currently have an HTML table that I am working with. The structure of the table is as follows: <table style="width:100%"> <tr> <th>id</th> <th>Lastname</th> <th>Age</th> </tr> <t ...

Keeping datetimepicker current when a date is chosen - a guide

I am currently utilizing the datetimepicker plugin from xdsoft to enable users to select a booking date and time. Check out the documentation for more details. To manage bookings, I have set up a 'fechas' table in my database which stores inform ...

Copying text from an iframe using HTML and JavaScript

As someone who is relatively new to web development, I am currently attempting to transfer text from an iframe to a textarea located on a Bootstrap-html webpage. You can view an example of the code I am working with here: https://jsfiddle.net/fe5ahoyw/ J ...

Using React to update an existing array of objects with a new array containing objects of the same type

My issue involves an array in a class's state, referred to as A. A is populated with objects of type B through the function f in the constructor. Subsequently, I create a new array of objects of type B called C using f and new data. Upon setting the s ...

difficulty receiving the information promptly via an AJAX request (utilizing AJAX and the 'for' loop)

Currently, I am successfully retrieving data from an ajax call for individuals. However, my next task is to retrieve multiple sets of data simultaneously. Here is the code snippet: for(var i = 1; i <= 2; i++){ console.log(i); $.ajax({ url: cal ...

Encrypting data using SSL in javascript and python simulation

Due to the restrictions imposed by the Great Firewall of China, Google AppEngine's secure https port has been blocked. To ensure the protection of my users' information from being intercepted by ISPs and the GFW, I am planning to create a Secure ...

Discover the following `<td>` identifier through the act of clicking on a separate `<td>` element

I have a few td's with specific ids: <td id="first">first</td> <td id="second">second</td> <td id="third">third</td> <td id="fourth">fourth</td> Whenever I click on one of the td elements, I want to re ...

What is the best way to associate a style with my v-for loop in this specific instance?

Why is there no styling applied to the td element when using steps.name? The code seems correct and I see no errors in the dev tools. <!-- Template --> <td v-for="steps in item.steps" v-bind:style="steps.name"> {{ steps.name }} </td> / ...

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

The error message states: `res.Send function is not recognized as a valid

Recently, I've been working on a function that goes like this: app.get('/counter', function (req, res) { console.log('/counter Request'); var counter = 0; fs.readFile(COUNTER_FILE_NAME, function(err, data) { c ...

handlebars and expressjs having trouble displaying the data

Hey there! I'm currently working on an application with express.js and handlebars. I've set up a get method to retrieve employee data when the user enters http://localhost:3000/id/2 in their browser. The id should be 2, and it's supposed to ...

Adding to array using v-model

Just starting out with Vue.js, I'm delving into developing a shop application using Vue and Webpack. My product data is stored in a json file, and I am rendering them with the help of v-for. My goal is to have the ability to add products to a cart by ...

"Enhance the functionality of multiple elements with this innovative Jquery

Exploring the realm of Jquery plugins, I am faced with the challenge of making my plugin compatible with multiple elements. After scouring tutorials and various online forums, I've come to realize that plugin development is heavily dependent on the sp ...

Vue.js: How to Handle Web Page Updates When State Changes in Nested Objects

Vue.js offers methods like Vue.set for adding and Vue.delete for deleting, but there is no specific method for 'update'. Instead, you can use Object.assign. This works well unless there are changes in nested objects. Is there a function in Vue th ...

Challenges with implementing Node Polyfills in webpack configuration file

I recently started delving into web development and currently tackling a React project that involves connecting to an AWS database. After installing MySql using npm install mysql, I encountered an error message: Module not found: Error: Can't resolve ...

German-formatted jQuery datepicker

Need help in changing jQuery datepicker formatting from MM/DD/YYYY to German style as d MMMM yyyy. Tried implementing the following code but encountering issues. <script type="text/javascript"> $(function () { $('.datepicker&ap ...

Is there a way to link a SQLite local database with an HTML frontend?

After transitioning my basic database from Ms Access to SQLite for the sake of having an open source option, I am now challenged with developing a visual data entry form for this database. A similar query (HTML/JS as interface to local SQLite database) ou ...

Are there any Ruby scripts or JavaScript libraries available for validating the correct format of HTML code?

I've attempted to scrape HTML from a URL using '.errors' in Nokogiri, but it's not working with the following example: <table> <td></td> </table> I'm not sure why it's returning 'TRUE' a ...