How do I get my images to load in Vue app using webpack and vue-loader?

Question

I'm new to Vue and working off some legacy code on a Vue app and am not sure why my images aren't loading to the page. I know my component's paths to the assets are correct because I have an extension that shows the image in my code, and they're appearing there.

I feel like the problem stems from here... This is came in my vue.config.js file:

  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.transformAssetUrls = {
          img: "src",
          image: "xlink:href",
          "b-avatar": "src",
          "b-img": "src",
          "b-img-lazy": ["src", "blank-src"],
          "b-card": "img-src",
          "b-card-img": "src",
          "b-card-img-lazy": ["src", "blank-src"],
          "b-carousel-slide": "img-src",
          "b-embed": "src",
        };
        return options;
      });
  },
};```

I built my app from Vue CLI so it should have come built in with Webpack and vue-loader, right? 
Are there any other dependancies that need to be added separately for this to function?

Any help is appreciated, thanks!

Abby · Accepted Answer · 2022-03-24 04:17:28Z

0

I believe I had the same exact issue as you! Eventually it was a simple fix, let me know if this helps.

<template>
  <main>
    <img src="../assets/logo.png" />
  </main>
</template>

<script>
import picture from '../assets/logo.png'


export default {
  name: 'HelloWorld',
  assets: picture
  }
}
</script>

Without importing, you can still access the photo by using it as a background-image of an element

main {
  background-image: url(src="../assets/logo.png")
}

answered Mar 24, 2022 at 4:17

Abby

1

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

Collectives™ on Stack Overflow

How do I get my images to load in Vue app using webpack and vue-loader?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related