search

DynamoMTL / shopify-pipeline

Shopify Pipeline - A modern pipeline for Shopify theme development
MIT License
86 stars 16 forks source link

Get asset from js file #109

Open francisneedham opened 6 years ago

francisneedham commented 6 years ago

Hi, how can i refer an image asset from the asset/images folder in my js code ?

i can have it working in dev mode with {require("../../images/my_image.svg")}

but no luck in production

thanks

nddery commented 6 years ago

Hey,

You should be able to do something like this:

import myImage from '../../images/my_image.svg'

export () => {
  const img = document.querySelector('img')
  img.src = myImage
}

Images are ran through the file-loader so myImage will end up being the path to your file.

Feel free to re-open this issue if it's still not working for you, and please include a bit more information as to what is not working specifically, any errors in the console or the terminal output.

francisneedham commented 6 years ago

HI, still no luck i can see the asset compile and go in production but while inspecting the code I can see that the asset name is correct (check_icon.8f418bdc803872eb7418758b962f0f7d.svg ) but it's missing the cdn path ( https://cdn.shopify.com/s/files/1/2044/6917/t/6/assets/ )

in development enviroment works perfectly ( linking to https://localhost:8080 )

thanks

f

nddery commented 6 years ago

That seems right, as far as I know, there is no way to get the Shopify CDN url in JavaScript. Maybe @t-kelly has an idea on how to retrieve it ?

t-kelly commented 6 years ago

You can add something like this to the <head> of your theme:

<script>
var theme = theme || {};
theme.images = {
  myImage: {{ 'my-image.svg' | asset_url | json }}
}
</script>

And then refer to the image URL as window.theme.images.myImage