1

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

1 Answers1

0

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.

Community
  • 1
  • 1
qw3n
  • 6,236
  • 6
  • 33
  • 62
  • Using the copy file plugin was something I was specifically trying to avoid. I know I can fall back to that though. Maybe a golden opportunity for a missing loader, to automatically copy the content of a folder when it can detect a path but not resolve a file. –  Mar 20 '17 at 16:44