Why are my images not showing up?

sage
1

I’ve uploaded images to assets/images, run gulp, see that they’re in /dist. However, they won’t load when using any src combination. /dist/images/image.jpg, dist/images/image.jpg, /images/image.jpg, …/images…

You name it, they won’t load, what am I missing? Something in vhost or htaccess?

Thanks.

2

<img src="<?= get_template_directory_uri() . '/dist/images/image.jpg'; ?>"> ?

3

In my template files I usually reference them like so:

<img src="<?= get_template_directory_uri();?>/dist/images/image.svg">

Works for me… You should also make sure that when running gulp that the images task is finished and that the files are created in the dist/images/ folder. If not, then something is silently failing.

4

lol we replied at literally the exact same second

1 Like
5

Thanks guys, I’m new to Roots/Sage and haven’t caught on to all of this yet.

On production I will be having stuff come from Amazon S3, so I suppose I will need to create a function that takes that into consideration and use it instead of this. Or should I also include the /dist folder on S3 and edit the get_template_directory_uri function?

6

Hi trainbolt, don’t worry, this is my first time using Sage as well. If you do plan on using S3 to store the dist folder, what I would do is set up some type of constant in the wp-config file and use that instead of the get_template_directory_uri function to point to your assets. Hope this makes sense, I might be way off but always trying to learn.

7

That’s a really cool idea - I’d love to see how it works out in practice!

Editing get_template_directory_uri isn’t going to be fun, so I might write my own, but that might not be necessary - I’d have to know more about your S3/deployment setup to suggest anything though.