vue image的src属性动态绑定以及渲染

html部分：

<view class="status_header_text" v-for="(item,index) in sideBarList" :key="index">
            <span>
                <image :src="item.icon" alt=""></image> 
            </span>
            <view>
                {{item.name}}
            </view>

</view>

js部分：

    data() {
            return {
           sideBarList:[],
            }
        },
        mounted() {

        },
        created() {
            this.sideBarList=[
                        {
                          name: "正常运行",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "正常停机",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "故障停机",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "急停",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "通讯故障",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "检修模式",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "警告",
                          icon: require("@/static/images/tulie1.png"),
                        },
                        {
                          name: "过载",
                          icon: require("@/static/images/tulie1.png"),
                        },
                      ];
        },