Vue.js 从对象数组绑定图像src

如何绑定

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>    

{{prod.id}
导出默认值{
数据：（）=>({
产品：[
{id:1112，src:“https://freeimage1.jpg" },        
{id:1113，src:“https://freeimage2.jpg" },   
]
}),    
};

Chrome控制台显示错误： 找不到模块“”

您将其绑定错误

更改此行：

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

为此：

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

您是否尝试过

如果图像可以通过web访问，那么它就是@Ifaruki的意思stated@Ifaruki它起作用了！谢谢