Mixing
NuxtServerError: Cannot find module 'undefined'
0
I'm trying to dynamically upload images into a vuetify carousel component from a folder I've added to the project path called 'Main'.
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>
function getImagePaths() {
// var images = require.context('../../main/img/', false, /.png$/)
var images = require.context("../../main/", false, /.png$/);
// var images = require.context('/main/', false, /.png$/)
console.log("images", images);
return images;
}
export default {
methods: {
imgUrl: getImagePaths()
}
};
I'm getting the:
NuxtServerError: Cannot find module 'undefined'
(screenshot above) How can I fix this?
EDIT: if I change the Script tag to:
<script>
// function getImagePaths() {
// // Load locally as a function.
// const fs = require("fs-extra");
// var requireContext = require("require-context");
// // var images = require.context('../../main/img/', false, /.png$/)
// var images = require.context("../../main/", false, /.png$/);
// // var images = require.context('/main/', false, /.png$/)
// console.log("images", images);
// return images;
// }
// export default {
// methods: {
// imgUrl: getImagePaths()
// }
// };
export default {
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
},
{
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>
It works as expected.
javascript vue.js nuxt.js
asked Jan 2 at 16:24
user61629user61629
9,16037143272
|
show 1 more comment
0
I'm trying to dynamically upload images into a vuetify carousel component from a folder I've added to the project path called 'Main'.
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>
function getImagePaths() {
// var images = require.context('../../main/img/', false, /.png$/)
var images = require.context("../../main/", false, /.png$/);
// var images = require.context('/main/', false, /.png$/)
console.log("images", images);
return images;
}
export default {
methods: {
imgUrl: getImagePaths()
}
};
I'm getting the:
NuxtServerError: Cannot find module 'undefined'
(screenshot above) How can I fix this?
EDIT: if I change the Script tag to:
<script>
// function getImagePaths() {
// // Load locally as a function.
// const fs = require("fs-extra");
// var requireContext = require("require-context");
// // var images = require.context('../../main/img/', false, /.png$/)
// var images = require.context("../../main/", false, /.png$/);
// // var images = require.context('/main/', false, /.png$/)
// console.log("images", images);
// return images;
// }
// export default {
// methods: {
// imgUrl: getImagePaths()
// }
// };
export default {
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
},
{
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>
It works as expected.
javascript vue.js nuxt.js
asked Jan 2 at 16:24
user61629user61629
9,16037143272
what do you get if try a source likehttps://cdn.vuetifyjs.com/images/carousel/sky.jpg?
– Boussadjra Brahim
Jan 2 at 18:33
@BoussadjraBrahim , please see edit.
– user61629
Jan 2 at 19:48
please look at thisanswer
– Boussadjra Brahim
Jan 2 at 19:57
Thank you I was not aware that images had to be imported as modules. Regarding your answer you have the following line: ' import img from './assets/jim.svg'; I'm trying to first get a list of paths to all the .png files. I don't want to hardcode in the src paths. '
– user61629
Jan 2 at 21:14
please edit your question by adding what your use case and what wen wrong if you adopt my answer?
– Boussadjra Brahim
Jan 2 at 21:17
|
show 1 more comment
0
0
0
I'm trying to dynamically upload images into a vuetify carousel component from a folder I've added to the project path called 'Main'.
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>
function getImagePaths() {
// var images = require.context('../../main/img/', false, /.png$/)
var images = require.context("../../main/", false, /.png$/);
// var images = require.context('/main/', false, /.png$/)
console.log("images", images);
return images;
}
export default {
methods: {
imgUrl: getImagePaths()
}
};
I'm getting the:
NuxtServerError: Cannot find module 'undefined'
(screenshot above) How can I fix this?
EDIT: if I change the Script tag to:
<script>
// function getImagePaths() {
// // Load locally as a function.
// const fs = require("fs-extra");
// var requireContext = require("require-context");
// // var images = require.context('../../main/img/', false, /.png$/)
// var images = require.context("../../main/", false, /.png$/);
// // var images = require.context('/main/', false, /.png$/)
// console.log("images", images);
// return images;
// }
// export default {
// methods: {
// imgUrl: getImagePaths()
// }
// };
export default {
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
},
{
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>
It works as expected.
javascript vue.js nuxt.js
asked Jan 2 at 16:24
user61629user61629
9,16037143272
I'm trying to dynamically upload images into a vuetify carousel component from a folder I've added to the project path called 'Main'.
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>
function getImagePaths() {
// var images = require.context('../../main/img/', false, /.png$/)
var images = require.context("../../main/", false, /.png$/);
// var images = require.context('/main/', false, /.png$/)
console.log("images", images);
return images;
}
export default {
methods: {
imgUrl: getImagePaths()
}
};
I'm getting the:
NuxtServerError: Cannot find module 'undefined'
(screenshot above) How can I fix this?
EDIT: if I change the Script tag to:
<script>
// function getImagePaths() {
// // Load locally as a function.
// const fs = require("fs-extra");
// var requireContext = require("require-context");
// // var images = require.context('../../main/img/', false, /.png$/)
// var images = require.context("../../main/", false, /.png$/);
// // var images = require.context('/main/', false, /.png$/)
// console.log("images", images);
// return images;
// }
// export default {
// methods: {
// imgUrl: getImagePaths()
// }
// };
export default {
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
},
{
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>
It works as expected.
javascript vue.js nuxt.js
javascript vue.js nuxt.js
asked Jan 2 at 16:24
user61629user61629
9,16037143272
asked Jan 2 at 16:24
user61629user61629
9,16037143272
edited Jan 2 at 19:48
user61629
asked Jan 2 at 16:24
user61629user61629
9,16037143272
asked Jan 2 at 16:24
user61629user61629
9,16037143272
asked Jan 2 at 16:24
user61629user61629
9,16037143272
9,16037143272
what do you get if try a source likehttps://cdn.vuetifyjs.com/images/carousel/sky.jpg?
– Boussadjra Brahim
Jan 2 at 18:33
@BoussadjraBrahim , please see edit.
– user61629
Jan 2 at 19:48
please look at thisanswer
– Boussadjra Brahim
Jan 2 at 19:57
Thank you I was not aware that images had to be imported as modules. Regarding your answer you have the following line: ' import img from './assets/jim.svg'; I'm trying to first get a list of paths to all the .png files. I don't want to hardcode in the src paths. '
– user61629
Jan 2 at 21:14
please edit your question by adding what your use case and what wen wrong if you adopt my answer?
– Boussadjra Brahim
Jan 2 at 21:17
|
show 1 more comment
what do you get if try a source likehttps://cdn.vuetifyjs.com/images/carousel/sky.jpg?
– Boussadjra Brahim
Jan 2 at 18:33
@BoussadjraBrahim , please see edit.
– user61629
Jan 2 at 19:48
please look at thisanswer
– Boussadjra Brahim
Jan 2 at 19:57
Thank you I was not aware that images had to be imported as modules. Regarding your answer you have the following line: ' import img from './assets/jim.svg'; I'm trying to first get a list of paths to all the .png files. I don't want to hardcode in the src paths. '
– user61629
Jan 2 at 21:14
please edit your question by adding what your use case and what wen wrong if you adopt my answer?
– Boussadjra Brahim
Jan 2 at 21:17
what do you get if try a source like
https://cdn.vuetifyjs.com/images/carousel/sky.jpg?– Boussadjra Brahim
Jan 2 at 18:33
what do you get if try a source like
https://cdn.vuetifyjs.com/images/carousel/sky.jpg?– Boussadjra Brahim
Jan 2 at 18:33
@BoussadjraBrahim , please see edit.
– user61629
Jan 2 at 19:48
@BoussadjraBrahim , please see edit.
– user61629
Jan 2 at 19:48
please look at this
answer– Boussadjra Brahim
Jan 2 at 19:57
please look at this
answer– Boussadjra Brahim
Jan 2 at 19:57
Thank you I was not aware that images had to be imported as modules. Regarding your answer you have the following line: ' import img from './assets/jim.svg'; I'm trying to first get a list of paths to all the .png files. I don't want to hardcode in the src paths. '
– user61629
Jan 2 at 21:14
Thank you I was not aware that images had to be imported as modules. Regarding your answer you have the following line: ' import img from './assets/jim.svg'; I'm trying to first get a list of paths to all the .png files. I don't want to hardcode in the src paths. '
– user61629
Jan 2 at 21:14
please edit your question by adding what your use case and what wen wrong if you adopt my answer?
– Boussadjra Brahim
Jan 2 at 21:17
please edit your question by adding what your use case and what wen wrong if you adopt my answer?
– Boussadjra Brahim
Jan 2 at 21:17
|
show 1 more comment
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f54009771%2fnuxtservererror-cannot-find-module-undefined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54009771%2fnuxtservererror-cannot-find-module-undefined%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
what do you get if try a source like
https://cdn.vuetifyjs.com/images/carousel/sky.jpg?– Boussadjra Brahim
Jan 2 at 18:33
@BoussadjraBrahim , please see edit.
– user61629
Jan 2 at 19:48
please look at this
answer– Boussadjra Brahim
Jan 2 at 19:57
Thank you I was not aware that images had to be imported as modules. Regarding your answer you have the following line: ' import img from './assets/jim.svg'; I'm trying to first get a list of paths to all the .png files. I don't want to hardcode in the src paths. '
– user61629
Jan 2 at 21:14
please edit your question by adding what your use case and what wen wrong if you adopt my answer?
– Boussadjra Brahim
Jan 2 at 21:17