Vue relative path image dependecy not found

Question

In my template I am using code

<img src="@/assets/images/logo-icon.png" alt="homepage" class="dark-logo" />

OR

<img src="./assets/images/logo-icon.png" alt="homepage" class="dark-logo" />

It gives the following error

This dependency was not found:

* @/assets/images/logo-icon.png in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/Header.vue?vue&type=template&id=61dd7a3d

Tried using url loader in vue.config.js still the same issue

UPDATE: Solved

Simply using <img src="/assets/images/logo-icon.png" alt="homepage" class="dark-logo" /> instead of <img src="assets/images/logo-icon.png" alt="homepage" class="dark-logo" />

Solved my problem,. and @ doesn't work with the latest Vue version I guess and it wasn't also in the documentations.

score 0 · Answer 1 · answered Feb 10 '21 at 19:11

0

have you tried with require? For example:

<img :src="require('@/assets/images/logo-icon.png')" />

answered Feb 10 '21 at 19:11

Miloš Pantelinac

96
5

I have but it wasn't working. I got it working by simply using '/path-to-assets'. The . and @ does not works with the latest version I guess and it wasn't in the documentation also. – Muhammad Uzair Feb 11 '21 at 11:19
Okay! Also depends on your project settings. – Miloš Pantelinac Feb 11 '21 at 11:26

Vue relative path image dependecy not found

1 Answers1