Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Get asset from js file #109

Open
francisneedham opened this issue Dec 7, 2017 · 4 comments
Open

Get asset from js file #109

francisneedham opened this issue Dec 7, 2017 · 4 comments

Comments

@francisneedham
Copy link

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
Copy link
Contributor

nddery commented Dec 7, 2017

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.

@nddery nddery closed this as completed Dec 7, 2017
@francisneedham
Copy link
Author

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
Copy link
Contributor

nddery commented Dec 12, 2017

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 ?

@nddery nddery reopened this Dec 12, 2017
@nddery nddery mentioned this issue Dec 12, 2017
Closed
@t-kelly
Copy link

t-kelly commented Dec 12, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@nddery @francisneedham @t-kelly