How to looping in img tag src using vuejs?

Question

I'm making some booking movie ticket webapp and now I want to fetch Movie Poster.jpg in loop and It's not working

Movie.vue

<template>
  <v-container grid-list-xs text-xs-center>
    <v-layout justify-center row wrap>
      <v-flex v-for="m in movies" :key="`1${m}`" xs2>
        <img :src="imgsrc(m.id)" height="326px" width="220px"> ///my problem
      </v-flex>
    </v-layout>
  </v-container>
</template>

And i want to use

<img :src="imgsrc(m.id)">

For looping and here my script

<script>
import { movies } from "@/Others/movie.json";
console.log(movies);

export default {
  props: ["movieId"],
  data() {
    return {
      movies
    };
  },
  methods: {
    imgsrc(movieId) {
      let result = `assets/movie_poster/${movieId}.jpg`;
      return result;
    }
.
.
.

Movie.vue path

project/src/components/Movie.vue

Movie Poster.jpg path

project/src/assets/movies_poster/[filename].jpg

My Movie.JSON

{
    "movies":[
        { "id": "Black panther"},
        { "id": "Avengers Infinity"},
        { "id": "Avengers Endsgame"},
        { "id": "Ant-Man"},
        { "id": "Spiderman Home Coming"}
    ],
    "Black_panther":[
        {"id":"A1", "seated": false, "price": 120},
        {"id":"A2", "seated": false, "price": 120},
        {"id":"A3", "seated": false, "price": 120},
        {"id":"A4", "seated": false, "price": 120},
        {"id":"A5", "seated": true, "price": 120},
        {"id":"B1", "seated": true, "price": 120},
        {"id":"B2", "seated": false, "price": 120},
        {"id":"B3", "seated": true, "price": 120},
        {"id":"B4", "seated": true, "price": 120},
        {"id":"B5", "seated": false, "price": 120},
        {"id":"C1", "seated": true, "price": 120},
        {"id":"C2", "seated": false, "price": 120},
        {"id":"C3", "seated": true, "price": 120},
        {"id":"C4", "seated": false, "price": 120},
        {"id":"C5", "seated": true, "price": 120}
    ],
.
.
.
.

Answer 1

Instead of using a function, you can do this directly:

<v-img contain
  :src="require('assets/movie_poster/' + m.id + '.jpg')"
/>

Answer 2

EDIT: I didn't take into account that you are destructuring during import... so I added destructuring to my example, which is working just fine.. I'm not really sure what the issue is here since it's working just fine for me...

Are you exporting that JSON object from 'movies.json' via export default ... ?

[CodePen Mirror]

const moviesJson = {
  movies: [
    { id: "Black panther" },
    { id: "Avengers Infinity" },
    { id: "Avengers Endsgame" },
    { id: "Ant-Man" },
    { id: "Spiderman Home Coming" }
  ],
  Black_panther: [
    { id: "A1", seated: false, price: 120 },
    { id: "A2", seated: false, price: 120 },
    { id: "A3", seated: false, price: 120 },
    { id: "A4", seated: false, price: 120 },
    { id: "A5", seated: true, price: 120 },
    { id: "B1", seated: true, price: 120 },
    { id: "B2", seated: false, price: 120 },
    { id: "B3", seated: true, price: 120 },
    { id: "B4", seated: true, price: 120 },
    { id: "B5", seated: false, price: 120 },
    { id: "C1", seated: true, price: 120 },
    { id: "C2", seated: false, price: 120 },
    { id: "C3", seated: true, price: 120 },
    { id: "C4", seated: false, price: 120 },
    { id: "C5", seated: true, price: 120 }
  ]
};

// SIMULATE DESTRUTURE DURING IMPORT
const { movies } = moviesJson;

new Vue({
  el: "#app",
  props: ["movieId"],
  data() {
    return {
      movies
    };
  },
  methods: {
    imgsrc(movieId) {
      let result = `assets/movie_poster/${movieId}.jpg`;
      return result;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <ul>
      <li v-for="m in movies" :key="`1${m}`">{{ imgsrc(m.id) }}</li>
    </ul>
    <v-container grid-list-xs text-xs-center>
      <v-layout justify-center>
        <v-flex v-for="m in movies" :key="`1${m}`" xs2>
          <img :src="imgsrc(m.id)" height="326px" width="220px">
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>