我想将对象数组中的图像存储到 <td>答案

【问题标题】：I want to store an image from an array of objects into a <td>我想将对象数组中的图像存储到 <td>
【发布时间】：2019-08-05 04:02:21
【问题描述】：

我正在创建一个购物车，我想将所选产品的副本连同该产品的详细信息一起存储到购物车中。除了图像，我可以访问和存储对象的所有内容。这是我在做什么的示例。

//Js used to create a list of products
 const products = [
{ id: 1, title: 'Product_1', price: 250.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 2, title: 'Product_2', price: 300.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 3, title: 'Product_3', price: 350.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 4, title: 'Product_4', price: 270.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 5, title: 'Product_1', price: 250.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 6, title: 'Product_2', price: 300.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 7, title: 'Product_3', price: 350.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 8, title: 'Product_4', price: 270.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 9, title: 'Product_1', price: 250.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 10, title: 'Product_2', price: 300.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 11, title: 'Product_3', price: 350.00, qty: 1, image: 'images/iphone.jpg' },
{ id: 12, title: 'Product_4', price: 270.00, qty: 1, image: 'images/iphone.jpg' }];



//Html code used to make the table of the shopping cart
                     <table class="table table-cart">
                        <tr v-for="(item, index) in items">
                        <td><img src={{item.image}}></img></td>
                           <td>{{item.title}} </td>

                           <td style="width:120px">QTY:
                              <input v-model="item.qty" class="form-control input-qty" type="number">
                           </td>
                           <td class="text-right">€{{item.price | formatCurrency}}</td>
                           <td>
                              <button @click="removeItem(index)"><span class="glyphicon glyphicon-trash"></span></button>
                           </td>
                        </tr>
                        <tr v-show="items.length === 0">
                           <td colspan="4" class="text-center">Cart is empty</td>
                        </tr>
                        <tr v-show="items.length > 0">
                           <td></td>
                           <td class="text-right">Cart Total</td>
                           <td class="text-right">€{{Total | formatCurrency}}</td>
                           <td></td>
                        </tr>
                     </table>

当我尝试<td><img src={{item.image}}></img></td> 时，我得到了一个图像应该在的框，但看起来图像无法加载。这是控制台上的错误

Web_tests/%7B%7Bitem.image%7D%7D net::ERR_FILE_NOT_FOUND

如果我尝试<td> {{item.image}}</td>，它会打印出图片的地址（images/iphone.jpg）

【问题讨论】：

您当前的代码有什么问题？
这是在 Vue.js 中吗？如果是这样，请用vue.js 标记问题
我尝试发布输出图像，但我认为它不起作用
这是vue.js的道歉，即添加了标签
我试过用 " " 没用，还是出现同样的错误

标签： javascript html image vue.js html-table

【解决方案1】：

在初始渲染时，在 vue.js 有机会渲染您的代码之前，浏览器会看到：

<img src="{{item.image}}"></img>

然后浏览器尝试加载 {{item.image}} 并失败并显示 net::ERR_FILE_NOT_FOUND。
你需要使用新的 attr 语法（vue 1.0）：

<!-- verbose -->
<img v-bind:src="item.image" />

<!-- shorthand -->
<img :src="item.image" />

详情请见documentation。

【讨论】：