Set image url on VueJs

[djom202]

Hi, currently I'm implementing the code this:

<vue-select-image :dataImages="dataImages" @onselectimage="onSelectImage" :selectedImages="getCatalogueImageSelected" ref="userImageSelect"></vue-select-image>

dataImages: [
  {
    id: 1,
    src: `https://${urlserver}/public/images/catalogs/1.png`,
    alt: 'Alt Image 1'
  },
  {
    id: 2,
    src: `https://${urlserver}/public/images/catalogs/2.png`,
    alt: 'Alt Image 2'
  },
  {
    id: 4,
    src:`https://${urlserver}/public/images/catalogs/4.png`,
    alt: 'Alt Image 4'
  },
  {
    id: 6,
    src: `https://${urlserver}/public/images/catalogs/6.png`,
    alt: 'Alt Image 6'
  }
]

As you can see I'm using the url from a external server that provide me static resources, but now I want to use the image stored on VueJs project, so I tried to use them as you see below:

[
  {
    id: 1,
    src: `@/assets/images/catalogs/1.png`,
    alt: 'Alt Image 1'
  },
  {
    id: 2,
    src: `@/assets/images/catalogs/2.png`,
    alt: 'Alt Image 2'
  },
  {
    id: 4,
    src:`@/assets/images/catalogs/4.png`,
    alt: 'Alt Image 4'
  },
  {
    id: 6,
    src: `@/assets/images/catalogs/6.png`,
    alt: 'Alt Image 6'
  }
]

Obviously that not works, so I'd like to know if you know how I could implement that images on the Vuejs project?

[rvera]

Sorry but I'm not familiar with vue. What's the actual html output once your code gets transpiled and executed? Do you see the actual elements but the images are not loading?

[djom202]

That's right, you could see something like this:

I'm supposing that maybe when the code find any @/assets/images (where usually Vue create the folder to the images), so the code can render the url right.

Example on Vue:

In this example my url is (http://localhost:8081/img/1.e8ee066f.png)