[英]I want to store an image from an array of objects into a <td>
I am creating a shopping cart and i would like to store a copy of the product selected into the cart along with the details of that product. 我正在创建一个购物车,我想将所选产品的副本以及该产品的详细信息存储到购物车中。 I can access and store everything of the object except the image.
我可以访问和存储除图像之外的所有对象。 Here is a sample of what im doing.
这是即时通讯的示例。
//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>
when i try <td><img src={{item.image}}></img></td>
i get a box where the image should be but it looks like the image cant be loaded. 当我尝试
<td><img src={{item.image}}></img></td>
我得到了一个应该放置图像的框,但看起来图像无法加载。 this is the error on console 这是控制台上的错误
Web_tests/%7B%7Bitem.image%7D%7D net::ERR_FILE_NOT_FOUND
and if i try <td> {{item.image}}</td>
it will print out the address of the image (images/iphone.jpg) 如果我尝试
<td> {{item.image}}</td>
,它将打印出图像的地址(images / iphone.jpg)
On initial rendering, before vue.js has a chance to even render your code, the browser sees this: 在初始渲染时,在vue.js甚至没有机会渲染您的代码之前,浏览器都会看到以下内容:
<img src="{{item.image}}"></img>
The browser then tries to load {{item.image}} and fails with net::ERR_FILE_NOT_FOUND . 然后,浏览器尝试加载{{item.image}}并失败,并显示net :: ERR_FILE_NOT_FOUND 。
You need to use the new attr syntax (vue 1.0): 您需要使用新的attr语法(vue 1.0):
<!-- verbose -->
<img v-bind:src="item.image" />
<!-- shorthand -->
<img :src="item.image" />
Please see the documentation for details. 请参阅文档以了解详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.