'Vue: Cannot find module (image) in the file

I wrote a line which shows a picture like

enter image description here

And my asset folder is structured as

enter image description here

Yet this is throwing

>Error: Cannot find module '@/assets/img/play.png'" found in ---> at resources/js/components/MusicPlayer.vue

Solutions I've tried:

  • enter image description here
  • enter image description here
  • enter image description here
  • enter image description here
  • enter image description here
  • enter image description here
  • enter image description here

Tried using enter image description here. Still the same problem.

Any solutions?

vue.js


Solution 1:[1]

Your screenshot shows assets under public, but your import URL uses the @ prefix, which is a common alias for <projectRoot>/src.

You can move public/assets to src/assets so that the @/assets URL would be found:

public/assets --move--> src/assets

This solution has the advantage of minimizing the build output, only including files that are actually used in code. The included images also go through Webpack's processing, e.g., if you've configured image optimization.

Alternatively, you can keep public/assets and use a static asset URL, which is the base URL prefixed to the path under public. For the play.img and a base URL of / (the default), the static URL would be /assets/img/play.img:

<img src="/assets/img/play.img">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tony19

Related Questions