Question

我正在制作一些预订电影票的Webapp，现在我想循环获取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路径

project / src / assets / movies_poster / [文件名] .jpg

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

编辑： ：我在导入过程中没有考虑到您destructuring的身分，因此我在示例中添加了结构分解功能很好。我不太确定问题出在哪里，因为它对我来说很好...

您是否要通过export default ...从“ movies.json”导出该JSON对象？

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

Answer 2

您可以直接执行以下操作，而不是使用函数：

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

如何使用Vue.js在img标签src中循环播放？

2 个答案: