Webpacker: Unable to use image in .vue file

[ankitrg]

I read about the example on how to use image in React file here, like so:

// React component example
// app/javascripts/packs/hello_react.jsx

import React from 'react'
import helloIcon from '../hello_react/images/icon.png'
import '../hello_react/styles/hello-react'

const Hello = props => (
  <div className="hello-react">
    <img src={helloIcon} alt="hello-icon" />
    <p>Hello {props.name}!</p>
  </div>
)

but When I try to do the same thing with Vue it doesn't work, can someone tell me if I am missing something?

<template lang="html">
  <img src="/images/zapier_logo.svg" />
</template>

<script>
import zapierLogo from 'images/zapier_logo.svg'

export default {
}
</script>

<style lang="css">
</style>

I would love to add this example to the docs too.

[gauravtiwari]

@ankitrg Here you go: https://github.com/gauravtiwari/webpacker-example-app/blob/master/app/assets/javascript/entries/app.vue#L3

Demo: https://webpacker-example-app.herokuapp.com/

[gauravtiwari]

@ankitrg Feel free to close the issue if the above solution works 👍

[feliperaul]

@gauravtiwari The linked repository no longer exists. Could you please update the question with a code sample? I'm also having issue in using an image inside .vue file.