如何使用 vuejs 在 img 标签 src 中循环？答案

【问题标题】：How to looping in img tag src using vuejs?如何使用 vuejs 在 img 标签 src 中循环？
【发布时间】：2019-06-11 19:00:36
【问题描述】：

我正在制作一些预订电影票 web 应用程序，现在我想在循环中获取 Movie Poster.jpg，但它不起作用

电影.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

电影海报.jpg 路径

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

我的电影.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}
    ],
.
.
.
.

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

编辑：我没有考虑到你在导入过程中是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>

【讨论】：