Topic: Images from assets

David Tee free asked 3 years ago


Expected behavior I want to reference images in my assets folder from mdb-view, mdb-carousel etc. All the examples have full URLs, not relative to the assets folder.

*Actual behavior*The src is literally what I have between the quotes eg "./assets/image.jpg". Whereas for images in the , the src is compiled into a local image the is displayed OK.

What am I missing??

Resources (screenshots, code snippets etc.)


Magdalena Dembna staff commented 3 years ago

Let me make sure I understand you completely: which kind of path doesn't work for you - './assets/images1' or 'https://' ? I didn't catch from your post what sort of images don't display properly.


David Tee free commented 3 years ago

./assets/images does not work


Magdalena Dembna staff commented 3 years ago

If you could provide a code snippet and screenshot of your project's structure, it would make it easier to spot a problem.


David Tee free commented 3 years ago

My code (sort of works, but the overlay is too large):

Your code (doesn't compile the image src properly):

NOTE: for mine, I have the img as a separate component within the . WIth yours, it is a src of the


Magdalena Dembna staff commented 3 years ago

There is no code after ':' - could you create a snippet in the response to this post instead of the comment and make sure that content is visible?


xdon82 free commented 1 year ago

David Tee How you managed to solve this path issue? for Dev mode


xdon82 free answered 1 year ago


SOLVED: in Nuxt , assets\images can be accessed using require();

But you could easily code that to not use require() and you could mention that in your manual

Still a component can be more nuxt/ user friendly



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.5.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No