0

I'm using Webpack to compile my Vue production bundle and it loads my images properly because they are defined used <img> tags in my component. I want to load an additional image and show it based on a condition. Since the image isn't set initially in an <img> tag Webpack isn't loading it using file-loader. When I call: 

event.currentTarget.children[2].innerHTML = "<img src='../assets/imgs/heart.png' />"

This doesn't work because heart.png was never processed by file-loader, while my previous images were. Any ideas on how to force Webpack to process this image without defining it in HTML my component. My other images (that work) look like this : <img src="data:image/png;base64,iVBORw0KGgo...=="> I understand why my image isn't loading (it's defined in a string), buy any suggestions?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Matt Auerbach
  • 201
  • 2
  • 9
  • Have you tried to put all the images inside the static folder ? Otherwise you can use the dynamic import like this https://github.com/vuejs-templates/webpack/issues/450#issuecomment-388515010 and let Vue do the job. – Salmen Bejaoui Apr 06 '19 at 07:07
  • 1
    Possible duplicate of [Vue.js dynamic images not working](https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working) – Sumurai8 Apr 06 '19 at 08:29
  • @SalmenBejaoui - After I import it, what would I reference as the src to in my string? ie `"";` – Matt Auerbach Apr 06 '19 at 08:33
  • @SalmenBejaoui - if I do `import Heart from '../assets/imgs/heart.png'` , then Heart references the proper encoded file, but I'm having trouble passing that into an image tag. This doesn't work `event.currentTarget.children[2].innerHTML = ""` like I thought it would – Matt Auerbach Apr 06 '19 at 09:23

0 Answers0