fix(pos): rendering of broken image on pos
diff --git a/erpnext/selling/page/point_of_sale/pos_item_cart.js b/erpnext/selling/page/point_of_sale/pos_item_cart.js
index 11a63b3..8a98973 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_cart.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_cart.js
@@ -636,13 +636,23 @@
function get_item_image_html() {
const { image, item_name } = item_data;
if (image) {
- return `<div class="item-image"><img src="${image}" alt="${image}""></div>`;
+ return `
+ <div class="item-image">
+ <img
+ onerror="cur_pos.cart.handle_broken_image(this)"
+ src="${image}" alt="${frappe.get_abbr(item_name)}"">
+ </div>`;
} else {
return `<div class="item-image item-abbr">${frappe.get_abbr(item_name)}</div>`;
}
}
}
+ handle_broken_image($img) {
+ const item_abbr = $($img).attr('alt');
+ $($img).parent().replaceWith(`<div class="item-image item-abbr">${item_abbr}</div>`);
+ }
+
scroll_to_item($item) {
if ($item.length === 0) return;
const scrollTop = $item.offset().top - this.$cart_items_wrapper.offset().top + this.$cart_items_wrapper.scrollTop();
diff --git a/erpnext/selling/page/point_of_sale/pos_item_selector.js b/erpnext/selling/page/point_of_sale/pos_item_selector.js
index b8a82a9..b6109ac 100644
--- a/erpnext/selling/page/point_of_sale/pos_item_selector.js
+++ b/erpnext/selling/page/point_of_sale/pos_item_selector.js
@@ -94,7 +94,11 @@
<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
</div>
<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
- <img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;">
+ <img
+ onerror="cur_pos.item_selector.handle_broken_image(this)"
+ class="h-full" src="${item_image}"
+ alt="${frappe.get_abbr(item.item_name)}"
+ style="object-fit: cover;">
</div>`;
} else {
return `<div class="item-qty-pill">
@@ -122,6 +126,11 @@
);
}
+ handle_broken_image($img) {
+ const item_abbr = $($img).attr('alt');
+ $($img).parent().replaceWith(`<div class="item-display abbr">${item_abbr}</div>`);
+ }
+
make_search_bar() {
const me = this;
const doc = me.events.get_frm().doc;