vue.js如何渲染圖片

這篇文章主要介紹vue.js如何渲染圖片，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue.js渲染圖片的方法：首先初始化列表；然后獲取上個頁面帶過來的參數(shù)，獲取api，app，foot；接著向后傳遞參數(shù)；最后渲染本地圖片。

vue.js渲染圖片的方法：

帶參數(shù)傳值

本地美食

<template>
    <div>
        <h2>美食</h2>
        <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;  //獲取上個頁面帶過來的參數(shù)
            this.axios({
            url: '/api/app/foot/',  //api 是跨越時設(shè)置的 app是路由分發(fā) foot是后端的接口
            data: {aa:aa},   //向后端傳遞參數(shù)
            method: 'post'  //post方式
        }).then((res) => {
            if (res.data.code == 200) {  // code == 200時
                this.footlist = res.data.message; // 初始化賦值
                console.log(res)
            }
        })
        }
    }
</script>
<style scoped>
</style>

以上是“vue.js如何渲染圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！