Vue.js 为什么不'；在我的v数据表中显示的t图像

因此，目前我使用v-data-table来显示通过道具传递到vue组件的数据。道具是一个对象数组，每个对象都有几个字段，但我只想显示name、img和store.price字段。名称和价格显示非常好，但是当我尝试显示图像时，数据表中只显示图像链接。有人能看一下我的代码并引导我走上正确的方向吗

 <template>
        <v-data-table
        v-model="selected"
        :headers="headers"
        :items="displayedTools"
        :items-per-page="10"
        :single-select="singleSelect"
        show-select
        class="elevation-1 tool-table"
      >

    <template slot="items" slot-scope="props">
        <td><img :src="props.item.img" style="width: 10px; height: 10px"></td>
        <td class="text-xs-right">{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.stores.price }}</td>
    </template>
  </v-data-table>
</template>

<script>
export default {
    name: 'ToolResults',
    props: ['found_tools'],
    data() {
        return {
            singleSelect: false,
            selected: [],
            headers: [
            { 
                text: 'Image', 
                value: 'img' 
            },
            {
                text: 'Tool Name',
                align: 'left',
                sortable: true,
                value: 'name',
            },
            { 
                text: 'Price', 
                value: 'stores.price' 
            }
            ],
            displayedTools: [{}]
        }
    },
    created() {
        this.populateTable()
        this.addImages()
    },
    methods: {
        populateTable(){
            this.found_tools.forEach(element => {
                this.displayedTools.push(element);
            });
        },
        //Method might need to be added to display Prices properly because it is an array. 
        displayPrices(){

        },
        //Add Image to rows
        addImages(){
            this.displayedTools.forEach(function(part, index, theArray) {
                //theArray[index].img = "<v-img src=" + theArray[index].img + "><v-img>"
                theArray[index].img = 'https:' + theArray[index].img 
            })
        },
        toToolboxPage(toolbox) {
            console.log(toolbox)
            // The Toolbox.vue compoent is already created. The user just needs to be redirected there
        }
    }
}
</script>

<style>
.tool-table {
    margin: 2em;
}
</style>

{{props.item.name}
{{props.item.stores.price}
导出默认值{
名称：'ToolResults'，
道具：[“找到工具”]，
数据（）{
返回{
singleSelect:false，
选定：[]，
标题：[
{ 
文本：“图像”，
值：“img”
},
{
文本：“工具名称”，
对齐：“左”，
可排序：是的，
值：“名称”，
},
{ 
文字：“价格”，
价值：“商店。价格”
}
],
displayedTools:[{}]
}
},
创建（）{
this.populateTable（）
这是addImages（）
},
方法：{
populateTable（）{
this.found_tools.forEach（元素=>{
此.displayedTools.push（元素）；
});
},
//方法可能需要添加以正确显示价格，因为它是一个数组。
显示价格（）{
},
//将图像添加到行中
addImages（）{
this.displayedTools.forEach（函数（部分、索引、数组）{
//数组[index].img=“”
theArray[index].img='https:'+theArray[index].img
})
},
toToolboxPage（工具箱）{
控制台日志（工具箱）
//已创建Toolbox.vue组件。只需将用户重定向到该组件即可
}
}
}
.工具台{
边缘：2米；
}

上述代码的结果是：

---

您似乎还没有在模板处关闭img标签

另外，在

addImages（）

方法中，您对分配图像的行进行了注释，并留下了分配字符串的行，并且v-img标记未关闭

所以应该是这样的：

    addImages(){
        this.displayedTools.forEach(function(part, index, theArray) {
            theArray[index].img = "<v-img src=" + theArray[index].img + "></v-img>"
        })
    },

addImages（）{
this.displayedTools.forEach（函数（部分、索引、数组）{
数组[index].img=“”
})
},

在HTML中不需要结束标记，v-data-table的模板将取代addImages（）函数的注释行。此外，v-img标记在我的代码中已经关闭。此外，这些更改都没有解决显示实际img而不是字符串的问题。