Mixing
Dynamically get image paths in folder with Nuxt
I'm using nuxt with vuetify. I have a working carousel component .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js.org/guides/dependency-management/#context-module-api my component looks like:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
function importAll(r) {
r.keys().forEach(key => cache[key] = r(key));
}
var getImagePaths = importAll(require.context('../static/', false, /.png$/));
// At build-time cache will be populated with all required modules.
export default {
data: function() {
return {
items: getImagePaths
};
}
};
// export default {
// data() {
// return {
// items: [{
// src: "/52lv.PNG"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
// }
// ]
// };
// }
// };
//
</script>
I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.
I've found that if I edit the script's items array to look the following it will work:
items: [
{
src: '/52iv.png'
},
{
src: '/91Iv.png'
},
....
How can I adjust my code to get the result I need?
EDIT:
I looked at the proposed solution , but after copying it verbatum I got the following error.
javascript vue.js webpack nuxt.js nuxt
asked Jan 1 at 5:41
user61629user61629
9,11436137269
|
show 3 more comments
I'm using nuxt with vuetify. I have a working carousel component .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js.org/guides/dependency-management/#context-module-api my component looks like:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
function importAll(r) {
r.keys().forEach(key => cache[key] = r(key));
}
var getImagePaths = importAll(require.context('../static/', false, /.png$/));
// At build-time cache will be populated with all required modules.
export default {
data: function() {
return {
items: getImagePaths
};
}
};
// export default {
// data() {
// return {
// items: [{
// src: "/52lv.PNG"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
// }
// ]
// };
// }
// };
//
</script>
I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.
I've found that if I edit the script's items array to look the following it will work:
items: [
{
src: '/52iv.png'
},
{
src: '/91Iv.png'
},
....
How can I adjust my code to get the result I need?
EDIT:
I looked at the proposed solution , but after copying it verbatum I got the following error.
javascript vue.js webpack nuxt.js nuxt
asked Jan 1 at 5:41
user61629user61629
9,11436137269
Does this help?
– Islam Elshobokshy
Jan 3 at 15:32
Thank you I tried it verbatim but got the following error - Please see edit
– user61629
Jan 3 at 21:29
are you sure your path is correct? what happens if you do'../main/'or'~/main/instead? in regards to your original code. it looks like your carousel component is only one folder deep.
– ryeMoss
Jan 4 at 1:01
@ryeMoss , I've changed the folder to static
– user61629
Jan 4 at 18:43
I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method
– ryeMoss
Jan 4 at 18:54
|
show 3 more comments
I'm using nuxt with vuetify. I have a working carousel component .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js.org/guides/dependency-management/#context-module-api my component looks like:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
function importAll(r) {
r.keys().forEach(key => cache[key] = r(key));
}
var getImagePaths = importAll(require.context('../static/', false, /.png$/));
// At build-time cache will be populated with all required modules.
export default {
data: function() {
return {
items: getImagePaths
};
}
};
// export default {
// data() {
// return {
// items: [{
// src: "/52lv.PNG"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
// }
// ]
// };
// }
// };
//
</script>
I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.
I've found that if I edit the script's items array to look the following it will work:
items: [
{
src: '/52iv.png'
},
{
src: '/91Iv.png'
},
....
How can I adjust my code to get the result I need?
EDIT:
I looked at the proposed solution , but after copying it verbatum I got the following error.
javascript vue.js webpack nuxt.js nuxt
asked Jan 1 at 5:41
user61629user61629
9,11436137269
I'm using nuxt with vuetify. I have a working carousel component .I want to generate a list of The .png files in the static folder. Following Dynamically import images from a directory using webpack and Following https://webpack.js.org/guides/dependency-management/#context-module-api my component looks like:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
function importAll(r) {
r.keys().forEach(key => cache[key] = r(key));
}
var getImagePaths = importAll(require.context('../static/', false, /.png$/));
// At build-time cache will be populated with all required modules.
export default {
data: function() {
return {
items: getImagePaths
};
}
};
// export default {
// data() {
// return {
// items: [{
// src: "/52lv.PNG"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
// },
// {
// src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
// }
// ]
// };
// }
// };
//
</script>
I want to search through the static folder and grab the paths to the images , put them in an array and export them to the html template.
I've found that if I edit the script's items array to look the following it will work:
items: [
{
src: '/52iv.png'
},
{
src: '/91Iv.png'
},
....
How can I adjust my code to get the result I need?
EDIT:
I looked at the proposed solution , but after copying it verbatum I got the following error.
javascript vue.js webpack nuxt.js nuxt
javascript vue.js webpack nuxt.js nuxt
asked Jan 1 at 5:41
user61629user61629
9,11436137269
asked Jan 1 at 5:41
user61629user61629
9,11436137269
edited Jan 8 at 15:08
user61629
asked Jan 1 at 5:41
user61629user61629
9,11436137269
asked Jan 1 at 5:41
user61629user61629
9,11436137269
asked Jan 1 at 5:41
user61629user61629
9,11436137269
9,11436137269
Does this help?
– Islam Elshobokshy
Jan 3 at 15:32
Thank you I tried it verbatim but got the following error - Please see edit
– user61629
Jan 3 at 21:29
are you sure your path is correct? what happens if you do'../main/'or'~/main/instead? in regards to your original code. it looks like your carousel component is only one folder deep.
– ryeMoss
Jan 4 at 1:01
@ryeMoss , I've changed the folder to static
– user61629
Jan 4 at 18:43
I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method
– ryeMoss
Jan 4 at 18:54
|
show 3 more comments
Does this help?
– Islam Elshobokshy
Jan 3 at 15:32
Thank you I tried it verbatim but got the following error - Please see edit
– user61629
Jan 3 at 21:29
are you sure your path is correct? what happens if you do'../main/'or'~/main/instead? in regards to your original code. it looks like your carousel component is only one folder deep.
– ryeMoss
Jan 4 at 1:01
@ryeMoss , I've changed the folder to static
– user61629
Jan 4 at 18:43
I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method
– ryeMoss
Jan 4 at 18:54
Does this help?
– Islam Elshobokshy
Jan 3 at 15:32
Does this help?
– Islam Elshobokshy
Jan 3 at 15:32
Thank you I tried it verbatim but got the following error - Please see edit
– user61629
Jan 3 at 21:29
Thank you I tried it verbatim but got the following error - Please see edit
– user61629
Jan 3 at 21:29
are you sure your path is correct? what happens if you do
'../main/' or '~/main/ instead? in regards to your original code. it looks like your carousel component is only one folder deep.– ryeMoss
Jan 4 at 1:01
are you sure your path is correct? what happens if you do
'../main/' or '~/main/ instead? in regards to your original code. it looks like your carousel component is only one folder deep.– ryeMoss
Jan 4 at 1:01
@ryeMoss , I've changed the folder to static
– user61629
Jan 4 at 18:43
@ryeMoss , I've changed the folder to static
– user61629
Jan 4 at 18:43
I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method
– ryeMoss
Jan 4 at 18:54
I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method
– ryeMoss
Jan 4 at 18:54
|
show 3 more comments
1 Answer
1
active
oldest
votes
The following appears to work:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
const images = require.context('../static/', false, /.png$/);
var imagesArray = Array.from(images.keys());
var constructed = ;
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName.substr(1)
})
});
return constructed;
}
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
answered Jan 10 at 1:36
user61629user61629
9,11436137269
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993252%2fdynamically-get-image-paths-in-folder-with-nuxt%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The following appears to work:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
const images = require.context('../static/', false, /.png$/);
var imagesArray = Array.from(images.keys());
var constructed = ;
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName.substr(1)
})
});
return constructed;
}
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
answered Jan 10 at 1:36
user61629user61629
9,11436137269
add a comment |
The following appears to work:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
const images = require.context('../static/', false, /.png$/);
var imagesArray = Array.from(images.keys());
var constructed = ;
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName.substr(1)
})
});
return constructed;
}
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
answered Jan 10 at 1:36
user61629user61629
9,11436137269
add a comment |
The following appears to work:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
const images = require.context('../static/', false, /.png$/);
var imagesArray = Array.from(images.keys());
var constructed = ;
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName.substr(1)
})
});
return constructed;
}
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
answered Jan 10 at 1:36
user61629user61629
9,11436137269
The following appears to work:
<template>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</template>
<script>
var cache = {};
const images = require.context('../static/', false, /.png$/);
var imagesArray = Array.from(images.keys());
var constructed = ;
function constructItems(fileNames, constructed) {
fileNames.forEach(fileName => {
constructed.push({
'src': fileName.substr(1)
})
});
return constructed;
}
var res = constructItems(imagesArray, constructed);
console.log(res);
export default {
data: function() {
return {
items: res
};
}
};
answered Jan 10 at 1:36
user61629user61629
9,11436137269
answered Jan 10 at 1:36
user61629user61629
9,11436137269
answered Jan 10 at 1:36
user61629user61629
9,11436137269
answered Jan 10 at 1:36
user61629user61629
9,11436137269
9,11436137269
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993252%2fdynamically-get-image-paths-in-folder-with-nuxt%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Does this help?
– Islam Elshobokshy
Jan 3 at 15:32
Thank you I tried it verbatim but got the following error - Please see edit
– user61629
Jan 3 at 21:29
are you sure your path is correct? what happens if you do
'../main/'or'~/main/instead? in regards to your original code. it looks like your carousel component is only one folder deep.– ryeMoss
Jan 4 at 1:01
@ryeMoss , I've changed the folder to static
– user61629
Jan 4 at 18:43
I believe I was able to get it working using require.context() and the files in /main/. I imagine it would work the same in /static/. Unfortunately I'm also not very familiar with webpack to help out with your new method
– ryeMoss
Jan 4 at 18:54