如何使用vuejs在img tag src中循环？
如何使用vuejs在img tag src中循环？
提问于 2019-06-12 03:00:37
我正在制作一些预订电影票的not应用程序，现在我想在循环中获取电影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路径
项目/src/组件/电影.vue
电影Poster.jpg路径
项目/src/assets/movies_poster/filename.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}
],
.
.
.
.回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-14 00:42:12
您可以直接执行此操作，而不是使用函数：
<v-img contain
:src="require('assets/movie_poster/' + m.id + '.jpg')"
/>
Stack Overflow用户
发布于 2019-06-12 03:14:01
编辑：我在导入时没有考虑到你是destructuring ...所以我在我的示例中添加了解构，它工作得很好..我真的不确定问题在这里，因为它对我来说工作得很好……
你要通过export default ...从'movies.json‘中导出那个JSON对象吗？
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56550211
复制相关文章
相似问题
腾讯云开发者
