I want to store an image from an array of objects into a

Question

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. 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)

Is this in Vue.js? If so please tag the questions with `vue.js` — Aviad P., Mar 14 '19 at 09:58
i tried posting an image of the output but i dont think it worked — Owen, Mar 14 '19 at 09:59
I tried using " " and it didnt work, i still got the same error — Owen, Mar 14 '19 at 10:05
The error suggests that the file is not found, do you have an `images` folder with that image in it at the good place? Also note that `img` tag is self-closing, use `` instead of `` — Kaddath, Mar 14 '19 at 10:11
I do have the image saved in an images folder in that location. When i try pass in the image address using {{item.image}} it isnt reading as images/iphone.jpg it reads it as %7B%7Bitem.image%7D%7D — Owen, Mar 14 '19 at 10:21
Possible duplicate of [How to solve Interpolation inside attributes has been removed. Use v-bind or the colon shorthand ? Vue.JS 2](https://stackoverflow.com/questions/43211760/how-to-solve-interpolation-inside-attributes-has-been-removed-use-v-bind-or-the) — Kaddath, Mar 14 '19 at 10:26

score 0 · Accepted Answer · answered Mar 14 '19 at 10:24

On initial rendering, before vue.js has a chance to even render your code, the browser sees this:

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

The browser then tries to load {{item.image}} and fails with net::ERR_FILE_NOT_FOUND.
You need to use the new attr syntax (vue 1.0):

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

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

Please see the documentation for details.

I want to store an image from an array of objects into a

1 Answers1