Assets/images skipped on build or deploy

[jonathanmoore]

Problem

Images placed into /src/assets/images are not copied into /dist/assets on build or deploy.

Replication steps

1. Place an image (jpeg, jpg, svg, png, gif) into /src/assets/images
2. Run yarn build or yarn deploy
3. The expectation would be to find the images in /dist/assets but nothing is copied over

More Information

It looks like there is a missing paths item in slate-tools.config.js for images that is referenced in core.js. I tried locally fix it hoping it was a simple fix, but I think the issue is bigger than just a path reference.

slate/packages/slate-tools/slate-tools.config.js

Lines 73 to 99 in d67f445

	id: 'paths',
	description: 'Paths used by @shopify/slate-tools',
	items: [
	{
	id: 'root',
	default: resolveTheme('./'),
	},
	{
	id: 'dist',
	default: resolveTheme('dist'),
	},
	{
	id: 'src',
	default: resolveTheme('src'),
	},
	{
	id: 'static',
	default: resolveTheme('src/assets/static'),
	},
	{
	id: 'scripts',
	default: resolveTheme('src/assets/scripts'),
	},
	{
	id: 'svgs',
	default: resolveTheme('src/assets/svg'),
	},

slate/packages/slate-tools/tools/webpack/config/core.js

Lines 47 to 54 in d67f445

	if (fs.existsSync(paths.images)) {
	plugins.push(
	new webpack.ContextReplacementPlugin(
	/__appimages__/,
	replaceCtxRequest(paths.images),
	),
	);
	}

[wrozka]

Any updates on this one? I migrated my 0.x template to 1.x but I can't add any new images now.

[petema3]

FWIW I also was having trouble with this until I realized that it only uploads images from /src/assets/images/ if:

1. It's actually used in your theme somewhere.
2. The local path is used, with single quotes around the file path, not double quotes.

So it didn't upload the images when I didn't have the image referenced in the theme yet anywhere, or if I used the old way with just the filename like this {{ "placeholder.png" | asset_url }}. But if I add it in the theme as {{ '../assets/images/placeholder.png' | asset_url }} it works.

I'm not sure if this is a bug or a feature, but this is the functionality as I've mapped it out through trial and error.

[xavianaxw]

#557 and #559 talks about this

[DPerkunas]

Any news on this? Same issue, using {{ '../assets/images/placeholder.png' | asset_url }} with asset in /src/assets/images/placeholder.png didn't work for me like it did for petema3.

A url is generated by shopify, but no images found uploaded into shopify's theme/assets folder.

[xavianaxw]

@DPerkunas have you tried yarn deploy

[DPerkunas]

@xavianaxw Yeah I did. Maybe the issue is the fact that I'm deploying to a live site but here's the full scenario of what I noticed.

While having yarn watch running.

In src/templates/theme.liquid I added {{ '../assets/images/placeholder.png' | asset_url }} tried also ../images/placeholder.png, and what I noticed is it didn't migrate/copy the image in the /dist/assets/images folder. I tried yarn build and yarn deploy with no luck.

That being said, as expected, if I include the images via CSS like for a background, it will work when I use yarn deploy.

So is this a slate limitation or a bug? If using CSS + deploy, it will upload. If using liquid + deploy, it won't. We don't search liquid files for asset usage? I'm re-reading the OP, and thinking my scenario is different from OP.

[xavianaxw]

@DPerkunas interesting discovery.

The reason why {{ '../assets/images/placeholder.png' | asset_url }} does not work for you could be related to Shopify not detecting that the asset is being used in your code. I read it somewhere (but I can't find the link) but it states that if it's not being used then Shopfiy's Slate would not pick it up.

If you try

{{ '../assets/images/placeholder.png' | asset_url |img_tag }} or <img src="{{ '../assets/images/placeholder.png' | asset_url }}"/> and run yarn deploy again, it will get pulled into the assets folder in Edit Code screen.

I'll post again if I ever stumble upon that thing I read.

[t-kelly]

Sounds like the general consensus is that people would like images copied over, regardless if they are referenced in liquid or not? I don't see any harm in doing that?

[wrozka]

@t-kelly That would solve my problems

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.