Concatenate static Image path with KnockoutJS data-bind
문제
This is my JS File code
define([
'uiComponent'
], function (Component) {
'use strict';
var some_products = window.checkoutConfig.my_specificProducts;
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/additional-block'
},
someProducts: some_products
});
});
This is my template file code
<table>
<thead>
<tr><th>Name</th><th>Sku</th><th>ImagePath</th><th>Image</th></tr>
</thead>
<tbody data-bind="foreach: someProducts">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: sku"></td>
<td data-bind="text: image"></td>
<td> <img data-bind="attr: { src: '/pub/media/catalog/product'+image, alt: not found }"></td>
</tr>
</tbody>
</table>
The output on the checkout page is
Image is not displaying as you can see in screenshot
data-bind="attr: { src: 'pub/media/catalog/product/'+image(), alt: not found }" and also try **../pub/** or **~/pub** But not work .
Can anyone guide me how to concatenate static path with product dynamic path which will show image on checkout page?
Thanks in advance!
해결책
You may try to update your js component and template as given below.
Please Note:
I used checkoutConfig.staticBaseUrl to get static base URL and the replace "pub/static" from the URL to get the base URL.
we can use any other approach to the base URL of your web site.
step 1) JS File code
define([
'uiComponent'
], function (Component) {
'use strict';
var some_products = window.checkoutConfig.my_specificProducts;
var baseUrl = checkoutConfig.staticBaseUrl
baseUrl = baseUrl.replace("pub/static/",'');
return Component.extend({
defaults: {
template: 'Vendor_Module/checkout/shipping/additional-block'
},
someProducts: some_products,
getImagepath: function(productimage){
return baseUrl + productimage;
}
});
});
step 2) Template File code
<table>
<thead>
<tr><th>Name</th><th>Sku</th><th>ImagePath</th><th>Image</th></tr>
</thead>
<tbody data-bind="foreach: someProducts">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: sku"></td>
<td data-bind="text: image"></td>
<td> <img data-bind="attr: { src: $parent.getImagepath(image) alt: not found }"></td>
</tr>
</tbody>
</table>
제휴하지 않습니다 magento.stackexchange