Shopify new order printer - cannot produce line item images

[UK_Aspire_Vendo]

We're attempting to migrate from order printer (now a legacy app) to Shopify Order printer, and our template no longer produces line item images.

The code we were previously using is as follows:

<td class="product-image-wrapper"><img src="{{ line_item.image | img_url: 'medium' }}"></td>

This now produces a broken image icon instead and I cannot fathom how to get this to work.

Any assistance would be greatly appreciated.

[tim]

The code is proper and generated url is proper as well, but image is blocked because of CSP (content security policy) which does not include your own domain.

It could work with older cdn urls which all were served from https://cdn.shopify.com, but now all assets are served from https://yoursite.com .

Nothing we can do -- need to contact Shopify support...

Thats's the CSP served on order printer HTML documents:

child-src 'self' https://* shopify-pos://* blob:;
connect-src 'self' blob: wss://* https://* https://bugsnag-mtl.shopifycloud.com:4900/js hcaptcha.com *.hcaptcha.com;
default-src 'self' data: blob: https://* shopify-pos://*;
frame-src app.shopify.com *.shopifyapps.com *.myshopify.com *.myshopify.com https://* shopify-pos://* hcaptcha.com *.hcaptcha.com blob: http://localhost:*
media-src 'self' data: blob: https://videos.shopifycdn.com https://cdn.shopify.com/videos/ https://cdn.shopify.com/shopifycloud/web/assets/v1/ https://almond-sandpiper-6593.twil.io/assets/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' cdn.shopify.com cdn.shopifycdn.net *.shopifycs.com www.google-analytics.com stats.g.doubleclick.net app.shopify.com app.myshopify.com c.paypal.com www.paypal.com appcenter.intuit.com mpsnare.iesnare.com api.stripe.com maps.googleapis.com js.braintreegateway.com songbird.cardinalcommerce.com hcaptcha.com *.hcaptcha.com www.youtube.com s.ytimg.com;
style-src 'self' 'unsafe-inline' data: blob: https://*;
upgrade-insecure-requests;
worker-src 'self' blob:

[tim]

Looks like they've fixed something( ?) and original code works for me now.

[Bob_ · Accepted solution]

This code works for me -  <td><img src="https://cdn.shopify.com/s/files/1/0551/5085/{{ line_item.image | image_tag }}" style="Width:100px"></td>

But I suspect it won't for you, but if you go onto the old Order Printer and right click on open image in a new tab you should be able to get the correct path for your photo's (the two lots of 4 digits after /files/1/ are probably different for every store.

[tim]

Yeah, that's what meant by "old cdn urls", but it's kinda weird to do it like this, right?

[Bob_]

Yeah, That's was what got me looking at it this way as I was confinced I just hadn't got the "new" liquid commands right and it was something I'd done (or wasn't doing) 😄 

[UK_Aspire_Vendo]

Yeah this worked a treat! Thank you so much. What a horrendous way for us to get our packing slips to work eh?

[Bob_]

To be fare the old one won't stop working until the end of August so you can still use it until then and I suspect any issues like this will be fixed by then. I also suspect this might stop working at some point as well as if they are changing over to //storename/cdn instead of //cdn.shopify.com these links may stop working, but we'll see.