How to link image in components in vue?

Question

My Vue project structure is:-

|-public
|   |-symbol
|       |-smally.JPG
|-src
|  |-components
|      |-Header.vue
|-App.vue

Header.vue contains :-

<template>
   <ons-page>
        <div class="toolbar">
            <div class="toolbar__left">
                 <img src="./public/symbol/{{HeaderImage}}"/>
            </div>
        </div>
    </ons-page>
</template>
<script type="text/javascript">
export default{
    name:'Header',
    props:['HeaderImage']
}
</script>

while App.vue contains,

<template id="main-page">
    <Header HeaderImage="smally.jpg"/>
</template>

<script>
  import Header from './components/Header.vue'

  export default {
     name: 'app',
     components: {
       Header
      }
  }
</script>

It's not working

rcbgalido · Accepted Answer · 2020-01-01 15:49:16Z

1

You don't need to put ./public/

<img :src="'symbol/' + HeaderImage"/>

edited Jan 1, 2020 at 15:49

answered Jan 1, 2020 at 15:28

rcbgalido

5343 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rcbgalido Over a year ago

Maybe because the filename is smally.JPG while the value of HeaderImage is smally.jpg.

Gagan Singh Over a year ago

It's not working because if :src bind if the whole value is variable. say if HeaderImage has symbol/smally.jpg but in my case it's not working

rcbgalido Over a year ago

Check the updated code. I completely forgot about data binding.

Ahmet Zeybek · Accepted Answer · 2020-01-01 15:35:37Z

0

Create a new folder in src named with assets
Put your image into assets folder
Change <img src="./public/symbol/{{HeaderImage}}"/> to <img :src="'~/assets/' + HeaderImage"/> in your Header.vue file

answered Jan 1, 2020 at 15:35

Ahmet Zeybek

1,2241 gold badge14 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to link image in components in vue?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related