Блог

Главная - Вопросы по программированию - Я хочу сохранить изображение из массива объектов в

Я хочу сохранить изображение из массива объектов в

#javascript #html #image #vue.js #html-table

#javascript #HTML #изображение #vue.js #html-таблица

Вопрос:

Я создаю корзину покупок, и я хотел бы сохранить копию выбранного продукта в корзину вместе с подробной информацией об этом продукте. Я могу получить доступ ко всему объекту, кроме изображения, и сохранить его. Вот пример того, что я делаю.

 //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{item.image%7D} net::ERR_FILE_NOT_FOUND

и если я попытаюсь <td> {{item.image}}</td> , он распечатает адрес изображения (images/iphone.jpg )

Комментарии:

1. В чем проблема с вашим текущим кодом?

2. Это в Vue.js ? Если да, пожалуйста, помечайте вопросы с vue.js

3. я пытался опубликовать изображение выходных данных, но я не думаю, что это сработало

4. это vue.js прошу прощения, ie добавил тег

5. Я попытался использовать » «, и это не сработало, я все еще получал ту же ошибку

Ответ №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" />

Пожалуйста, смотрите документацию для получения подробной информации.