How do I use local image files rather than image URLs?

[rockandrollmachine]

I'm using the quick-start code to learn about VueFlux VueFlux Overview but I'm falling down on using local image assets rather than a link to an URL.

This is my vue-flux:

    <vue-flux ref="slider"
      :options="vfOptions"
      :images="vfImages"
      :transitions="vfTransitions"
      :captions="vfCaptions"
    >

and the documentation has this syntax for the images array:

vfImages: [ 'URL1', 'URL2', 'URL3' ],

So something like this works great::

vfImages: [
"https://upload.wikimedia.org/wikipedia/commons/8/82/OrlandoNightSkyline.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Lake_Eola_Park_in_Orlando_01.jpg/1200px-Lake_Eola_Park_in_Orlando_01.jpg"
      ],

but I cannot for the life of me get any permutation of file paths to local images to work, such as:

vfImages: [
"@/assets/image/property/bathroom1.jpg",
"../assets/image/property/bathroom1.jpg"
],

Is it meant to work with local image files or am I missing something?

Regards,

Mark

[ragnarlotus]

Hello! just check the App.vue in src directory, I recommend to place images in public folder.

Regards!

[rockandrollmachine]

Thanks for the answer! After trying for hours, I finally figured it out! This works:

      vfImages: [
        require("@/assets/image/property/bathroom1.jpg"),
        require("@/assets/image/property/bathroom2.jpg")
      ],

If anyone has a slicker method though, I'd be delighted to hear it.

Regards,

Mark

[ragnarlotus]

I mean the App.vue in the source directory of this project 😀

I think that method would pack the images in the app, which I do not recommend because will increase the load time of the spa too much depending on the images.

It is very simple, just place the images in the public folder and then you can reach them with that structure folder directly, just check the file I told you and I use to test the code.

I will improve the documentation to add the example of local files.

Regars!

[rockandrollmachine]

OK, thank you for the advice! Your library is awesome!

Regards,

Mark

[ragnarlotus]

Hello! Thanks a lot for your kind words :)

Where you able to use the images the way I told you?

Regards

[rockandrollmachine]

Hi Oscar,

I have got it working, but it may not be what you had in mind, so please advise.

I read up on what you said about having the pictures in the assets folder and the weight they could add to the application, so moved them into public.

I am not using the VueFlux in App.vue, but on a view I've called Pictures.vue (all done with Vue-router). I then have a component called TheFlux.vue which is inserted into Pictures.vue. So, my Pictures.vue is this:

<template>
  <div id="images">
    <TheFlux />
  </div>
</template>

<script>
import TheFlux from '@/components/TheFlux'
export default {
  name: 'Pictures',
  components: {
    TheFlux
  }
}
</script>

And so far my TheFlux.vue is this:

<template>
  <div class="flux">
      <vue-flux
        ref="slider"
        :options="vfOptions"
        :images="vfImages"
        :transitions="vfTransitions">

        <template v-slot:preloader>
            <flux-preloader />
        </template>

        <template v-slot:controls>
            <flux-controls />
        </template>
      </vue-flux>
  </div>
</template>

<script>
import {
   VueFlux,
   FluxControls,
   FluxPreloader,
} from 'vue-flux';

export default {
   components: {
      VueFlux,
      FluxControls,
      FluxPreloader,
   },
   data: () => ({
      vfOptions: {
         autoplay: true
      },
      vfImages: [],
      vfTransitions: [ 'fade', 'cube', 'book', 'wave' ]
   }),
  created() {
    this.loadImages();
   },
   methods: {
     loadImages () {
        this.vfImages.push(require("@/../public/image/property/bathroom1.jpg"));
        this.vfImages.push(require("@/../public/image/property/bathroom2.jpg"));
        this.vfImages.push(require("@/../public/image/property/bathroomShower.jpg"));
        this.vfImages.push(require("@/../public/image/property/livingRoom1.jpg"));
        this.vfImages.push(require("@/../public/image/property/livingRoom2.jpg"));
        this.vfImages.push(require("@/../public/image/property/mainBedroom.jpg"));
        this.vfImages.push(require("@/../public/image/property/mainBedroomBed.jpg"));
        this.vfImages.push(require("@/../public/image/property/mainBedroomChair.jpg"));
        this.vfImages.push(require("@/../public/image/property/mainBedroomCoffeeStation.jpg"));
        this.vfImages.push(require("@/../public/image/property/porchFront.jpg"));
        this.vfImages.push(require("@/../public/image/property/porchSide.jpg"));
        this.vfImages.push(require("@/../public/image/property/bathroom1.jpg"));
        this.vfImages.push(require("@/../public/image/property/bathroom1.jpg"));
        this.vfImages.push(require("@/../public/image/property/bathroom2.jpg"));
     }
   }
}
</script>

I'll refactor to use a loop to load the filenames into the array when I know it's the best method, but is this what you would recommend? I have to use require, otherwise the filepath alone does not work.

Regards,

Mark

[ragnarlotus]

Hello Mark, you are right, that's not exactly what I meant. If you use require I think the images will be packed also with the SPA.

You don't need any require, In vfOptions add path: '/image/property/' and then just use the filenames in vfImages.

Running Vue development server will serve the public folder as root in the browser.

That should be all

Regards!

[rockandrollmachine]

Hi Oscar,

And now it's working perfectly!

I did go through the documentation before and try the path option, but couldn't get it to work. I didn't realise the root is mapped to /public to that explains why it didn't work.

I'm fairly new to this, so still learning, but I'm very impressed with Vue and Vue-Flux.

Thank you for your help!

Regards,

Mark