Relative path in Carousel

Topic: Relative path in Carousel

diegoft free asked 4 years ago

Expected behavior show carousel images

Actual behavior empty

Resources (screenshots, code snippets etc.)

captionsCarousel: [
    {
      img: true,
      src: '../../assets/images/crs2.png',
      alt: 'First Slide',
      caption: {
        animation: 'slideInLeft',
        title: 'Light mask',
        text: 'First text',
      },
    },
    {
      img: true,
      src: '~assets/images/crs3.png',
      caption: {
        animation: 'slideInDown',
        title: 'Strong mask',
        text: 'Second text',
      },
    },
    {
      img: true,
      src: '@/assets/images/crs4.png',
      caption: {
        animation: 'slideInRight',
        title: 'Slight mask',
        text: 'Third text',
      },

enter image description here

I have tried putting different paths like ../../assets, @/assets, ~assets and ~/assets and none of them works thanks

Add comment

Magdalena Dembna staff answered 4 years ago

1 0 Best answer

This relative path doesn't work as it's used from within a component inside a library. Try using require:

{
          img: true,
          src: require('../../assets/logo.png'),
          mask: "black-light",
          alt: "First Slide",
          caption: {
            title: "First slide"
          }
   }

Best regards, Magdalena

diegoft free commented 4 years ago

This works, Thank you

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

diegoft

21Support score
3Questions 0Answers 0Snippets