Load images using vue + webpack

Question

I'm trying this:

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

Or This

background-image: url("./src/assets/logo.png");

I'have made the npm install [email protected] npm install file-loader --save-dev.

But I recive this message

* ./src/assets/logo.png in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-219927dc","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/view/login/Login.vue

Daniel Gonzalez · Accepted Answer · 2018-10-17 18:48:52Z

1

I'm assuming your vue components and css files are located inside the src directory correct? In that case you need to change your url to

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

or

background-image: url("../assets/logo.png");

answered Oct 17, 2018 at 18:48

Daniel Gonzalez

1621 gold badge2 silver badges13 bronze badges

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

2 Comments

Marcos Moskorz Over a year ago

I recive that: Failed to compile. ./src/view/login/Login.vue?vue&type=style&index=0&id=219927dc&lang=css&scoped=true& (./node_modules/css-loader??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/view/login/Login.vue?vue&type=style&index=0&id=219927dc&lang=css&scoped=true&) Module not found: Error: Can't resolve '../assets/img/aqtech/logo_aqtech_branco_com_sombra.png' in 'local path*'

Daniel Gonzalez Over a year ago

are you still using url-loader? That is not necessary, did you also update the url on your img tag?

Collectives™ on Stack Overflow

Load images using vue + webpack

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related