Move images to public folder

I defined a public path via outputDir: 'Resources/Public' . The app is in Resources/Private/VueJS
On every build the public folder is renewed (deleted and recreated).
Now I need some images in Resources/Public/img .

Where do I have to place them and how do I configure to let VueCli copy them to the public path?
I don’t use them directly within the template.

Thanks for your help.
Mathias

If you place then within the public folder then will be copied to the outputDir.

  • Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

Thanks, this works!

I moved the file into public/img and it was rendered to my output dir Resources/Public/img. Perfect!

Another way is to define them within CSS even if they are not used:
.img1 { background: url("./../Img/myImage.png")}

Hello There.
I put the images on the public folder inside a subfolder called relaxation
then i on the method this function:

getImages(img: string) {
  return require(`${this.publicPath}/background/${img}`);
},

my data

  data() {
    return {
      images,
      modalOpen: false,
      index: 0,
      publicPath: process.env.BASE_URL
    };
  },

and got this error:

Error: Cannot find module ‘/relaxation/DE17-01.jpg’

both on build and on development.
What i am missing?

require is a Node function that you would use to import assets within your build directory (i.e. src). Your files are within the public directory which sits outside of the build directory. Because of this Webpack won’t be able to resolve the asset you’re trying to require/import.

The solution: Because all assets within public are simply copied to your build root (i.e. dist) don’t use require, but instead access the file with a string as you would without a build environment.

getImages(img: string) {
  return `/background/${img}`;
}
1 Like

i will try this thanks