vue.js图片怎么渲染

<template>

    <div>

        <h1>美食</h1>

        <table border="1">

            <tr>

                <td>美食</td>

                <td>美食图片</td>

                <td>美食价格</td>

            </tr>

            <tr  v-for="i in footlist">

                <td>{{i.name}}</td>

                <td><img :src="i.img" height="100" width="100"></td> // 渲染本地图片

                <td>{{i.price}}</td>

            </tr>

        </table>

    </div>

</template>

<script>

    export default {

        name: "foot",

        data: function () {

            return {

                footlist: []  //初始化列表

            }

        },

        mounted() {

            var aa = this.$route.params.id;  //获取上个页面带过来的参数

            this.axios({

            url: '/api/app/foot/',  //api 是跨越时设置的 app是路由分发 foot是后端的接口

            data: {aa:aa},   //向后端传递参数

            method: 'post'  //post方式

        }).then((res) => {

            if (res.data.code == 200) {  // code == 200时

                this.footlist = res.data.message; // 初始化赋值

                console.log(res)

            }

        })

        }

    }

</script>

<style scoped>

</style>