Cachebusting question - handling refs embedded in PHP code

sage
1

When I run yarn run build:production the cache busting setting adds nice hashes like so:

...
images/logo-drawcard_black_72b8c0a3.svg    2.33 kB          [emitted]
...

Which is all fine and dandy but I get broken image references in my template if the image is directly referenced in the PHP code, for instance:

<img src="<?php echo get_template_directory_uri(); ?>/dist/images/logo-drawcard_black.svg" />

Obviously this is because the MD5 hash isn’t part of the filename in that ref, but does this mean I have to go and manually add in the hash for all elements referenced like this? Is there an automatic way I can do this instead? I seem to get a whole bunch of broken items in my SCSS too, which rely on things like EOT / WOFF refs.

Right now I’ve turned off hash generation by setting this in config.json as a workaround, while hard-reloading my browser to flush out any cached items:

  "cacheBusting": "[name]"

...
images/logo-drawcard_black.svg    2.33 kB          [emitted]
...

But I am wondering, how do others handle this situation?

2

See https://github.com/roots/docs/blob/10e109ad21d3bcdbf45d02129d7dc1e6326aedb8/sage/theme-development-and-building.md#images-in-template-files

Edit: this is different with Blade and the docs aren’t updated yet. It’s now:

<img src="@asset('images/example.jpg')">
3

Webpack automatically handles that — what version of Sage 9 are you on?

4

what if you’re referencing json files in the javascript? how do you get them to be referenced correctly?