Cachebusting question - handling refs embedded in PHP code

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?


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

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

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

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