从对象数组绑定图像源

Question

如何绑定prod.src？

<v-row>
<v-col v-for="prod in products" :key="prod.id" cols="12" md="6" lg="3">
<v-btn outline block class="primary">{{prod.id}}</v-btn>                   
<img :src="require(`${prod.src}`)" />     <!-- I was trying this -->
</v-col>        
</v-row>
<script>
export default {
data: () => ({
products: [         
{ id: 1112, src: "https://freeimage1.jpg" },        
{ id: 1113, src: "https://freeimage2.jpg" },   
]
}),    
};
</script>    

Chrome 控制台显示错误：找不到模块"https://freeimage1.jpg">

Answer 1

你把它绑定错了。

更改此行：

<img :src="require(`${prod.src}`)" />

对此：

<img :src="prod.src" />