Как зацикливаться в теге img src, используя vuejs?

Question

Я делаю заказ билетов через веб-приложение, и теперь я хочу получить Movie Poster.jpg в цикле, и он не работает

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>

И я хочуиспользуйте

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

для зацикливания и вот мой скрипт

<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

project / src / components / Movie.vue

Movie Poster.jpg path

project / src / assets / movies_poster / [имя файла] .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

Вместо использования функции вы можете сделать это напрямую:

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

Answer 2

РЕДАКТИРОВАТЬ: Я не учел, что вы destructuring во время импорта ... поэтому я добавил деструктуризацию в мой пример, который работает просто отлично ..Я не совсем уверен, в чем здесь проблема, так как она прекрасно работает для меня ...

Вы экспортируете этот объект JSON из 'movies.json' через 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>