search

uicrooks / shopify-theme-lab

Shopify theme development environment using Liquid, Vue and Tailwind CSS. Built on top of Shopify CLI 🧪
https://uicrooks.github.io/shopify-theme-lab-docs/
MIT License
743 stars 132 forks source link

[Bug]: Adding images #117

Closed ineptian closed 3 years ago

ineptian commented 3 years ago

Operating system

Windows 10

Node.js version

15.5.0

Shopify CLI version

2.1.0

Browsers

Chrome

Version

4 (Current)

Modifications

No response

Details

  1. Add image.static.jpg to assets folder.
  2. Reference {{ 'image.static.jpg' | asset_url }}
  3. Get error 422 in chrome console. On shopify asset url the error is "Transformation Failed"

Attached screenshot of error in chrome console as well as asset url on shopify side.

image image

Notice

sergejcodes commented 3 years ago

This is a Shopify CLI bug. Currently, all binary file uploads are broken (images, fonts etc). Here's a comment from me on a similar issue in the Shopify CLI Repo

ineptian commented 3 years ago

Thanks for the reply on both issues. So the workaround for now is to: 1) Upload file manually in shopify. 2) Run shopify theme pull with the asset also in my local theme.

sergejcodes commented 3 years ago

This is too risky if you use a Shopify CLI command which pushes all files back to remote then all files will be broken again.

  1. I would place all files like you normally would in the assets directory and don't use them until the Shopify CLI issue is resolved
  2. Additionally upload these assets to the Shopify Files and use the provided cdn URLs <img src="https://cdn.shopify.com/..."> instead of e.g. {{ 'image.static.jpg' | asset_url }} for now

screen

ineptian commented 3 years ago

Looks like there is a fix for this finally, just waiting for it to get pulled into the main branch.

https://github.com/Shopify/shopify-cli/pull/1457

sergejcodes commented 3 years ago

This issue should now be fixed with the latest Shopify CLI 2.3.0 release.