https://i.sstatic.net/ope8z.png
I am working on a Vue carousel component and my goal is to dynamically generate a list of .png files from the static folder. I have followed instructions from here and also from here. Below is an excerpt from my component:
<script>
var cache = {};
const images = require.context('../static/', false, /PNG$/);
// const images = ["./52lv.PNG", "./Capture1.PNG", "./maps.PNG"]
console.log(images.keys());
console.log(images);
var constructed = [];
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName
})
});
return constructed;
}
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
</script>
Upon running:
$npm run dev
I encounter the following warnings:
√ Client
Compiled successfully in 946.50ms
√ Server
Compiled successfully in 708.75ms
WARN Compiled with 2 warnings friendly-errors 20:54:28
WARN in ./static/91lv.PNG friendly-errors 20:54:28
Module parse failed: Unexpected character '' (1:0) friendly-errors 20:54:28
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
friendly-errors 20:54:28
@ ./static sync nonrecursive \.PNG$
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/carousel.vue?vue&type=script&lang=js&
@ ./components/carousel.vue?vue&type=script&lang=js&
@ ./components/carousel.vue
@ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/default.vue?vue&type=script&lang=js&
@ ./layouts/default.vue?vue&type=script&lang=js&
@ ./layouts/default.vue
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js friendly-errors 20:54:28
WARN in ./static sync nonrecursive \.PNG$ friendly-errors 20:54:28
There are multiple modules with names that only differ in casing. friendly-errors 20:54:28
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* ......\js\nuxt4\static sync nonrecursive /\.PNG$/
Used by 1 module(s), i. e.
......\js\nuxt4\node_modules\babel-loader\lib\index.js??ref--2-0!......\js\nuxt4\node_modules\vue-loader\lib\index.js??vue-loader-options!......\js\nuxt4\components\carousel.vue?vue&type=script&lang=js&
* ......\js\nuxt4\static sync nonrecursive /\.png$/
Used by 2 module(s), i. e.
......\js\nuxt4\node_modules\babel-loader\lib\index.js??ref--2-0!......\js\nuxt4\node_modules\vue-loader\lib\index.js??vue-loader-options!......\js\nuxt4\pages\index.vue?vue&type=script&lang=js&
friendly-errors 20:54:28
Any recommendations on how to resolve these issues?