Image not showing in vue.js and onsen ui app

Question

I have used the following code to load image in my App which is based on Vue.js and Onsen UI . But they are not showing.

  <div class="footer_logo">
    <ul>
      <li class=""><img :src="logo" alt="logo" /></li>
    </ul>
  </div>

I have imported the image using the following code in script

import foot1 from 'static/assets/img/footerlogos/1.svg';
export default {
  data() {
      logo: foot1;
  }

Edit

Project structure

Answer 1

svg image can be a problem first change it than check either it works or not. It it's not working follow the following solution.

you have to put all your image files in assets folder inside src folder not src/static

Test with this.

• create assets directory inside src folder ( make sure it assets not asset or anything else )
• add an image ex: logo.jpg

than your code

 <div class="footer_logo">
    <ul>
      <li class=""><img :src="logo" alt="logo" /></li>
    </ul>
  </div>

and finally update your script

import foot1 from 'assets/logo.jpg';
export default {
  data() {
      logo: foot1;
  }

Answer 2

If static folder is on the root of your project, you should use some root suffix like this:

import foot1 from '@static/assets/img/footerlogos/1.svg';

export default {
  data() {
      logo: foot1;
}

References:

• Babel Plugin Root Import

Answer 3

Add a relative path like this:

import foot1 from '../static/assets/img/footerlogos/1.svg';

export default {
  data() {
      logo: foot1;
}