Search code examples
htmlwebpackvue.jswebpack-file-loaderwebpack-html-loader

WebPack HTML and File Loader with programmatic img src

I'm using WebPack 2 and we're trying to specify an image name programmatically with Vue, and bind it in the HTML. Since the image name and path isn't bound until run-time, HTML and File Loader doesn't rewrite the url.

Is there a way to tell HTML/File loader that "any of [these files] might be needed at runtime" without just putting them in a list for the file copy plugin?

<img :src="`~assets/images/tmp-iconic/${random}.jpg`">

It gets passed through to the client as written, and then Vue binds ${random} at runtime, and of course the image isn't in the application.

Thanks

Solution

  • What you will want to do is use this answer https://stackoverflow.com/a/33374807/379650 and copy the image folder over to your build.