pass image path to child from parent in vue.js with vue-cli
up vote
1
down vote
favorite
[DONE] A non-comment is a loaded
I just start using vue.js with "vue-cli" just now.
but, now I faced a problem.
purpose : I want the parent component to pass the image path to the child component as a string, and the child to load the image using it.
However, in the process of bundling the webpack, It can not call it unless it have to do hash processing like other images, only first image components work.
Do I need to configure vue.config.js differently?
Or is it possible to change the way an image is called in a vue?
thanks.
<template lang="pug">
.container
img(src="../assets/image/logo.png")
//- img(style='{ "width" : "200px" , "height" : "200px" }' :style="{backgroundImage : logoSrcUrl }")
//- img(:src="logoSrc")
//- img(:src="logoSrcUrl")
//- img(:src="logoSrcRequire")
img(:src="getImg(this.$props.imgSrc)")
img(:src="stringRequire")
//- img(:src="logoSrcData")
//- img(:src="logoSrcDataUrl")
</template>
<script>
export default {
props : {
"imageDir" : String,
"imgSrc" : String,
},
data(){
return {
logoSrcData : '',
}
},
computed : {
logoSrc(){
return this.$props.imageDir + this.$props.imgSrc
},
logoSrcRequire(){
return require(this.logoSrcData)
},
stringRequire(){
return require("../assets/image/logo.png")
},
logoSrcUrl(){
return `url(${this.$props.imageDir}${this.$props.imgSrc})`
},
logoSrcDataUrl(){
return `url(${this.logoSrcData})`
},
},
methods : {
getImg(fileName){
return require('../assets/image/' + fileName)
}
},
created() {
console.log(this.$props.imageDir) // ../assets/image/
console.log(this.$props.imgSrc) // logo.png
this.$data.logoSrcData = this.$props.imageDir + this.$props.imgSrc
console.log(this.logoSrcData) // ../assets/image/logo.png
},
}
</script>
<style scoped>
</style>
In addition, when bundling with WebPack, can I implement additional work to change the hash value only for the changed image? Or does WebPack need a pre-bundler because it does not refer to previous bundling files?
vue.js
asked Nov 8 at 2:28
ParkDyel
3619
add a comment |
up vote
1
down vote
favorite
[DONE] A non-comment is a loaded
I just start using vue.js with "vue-cli" just now.
but, now I faced a problem.
purpose : I want the parent component to pass the image path to the child component as a string, and the child to load the image using it.
However, in the process of bundling the webpack, It can not call it unless it have to do hash processing like other images, only first image components work.
Do I need to configure vue.config.js differently?
Or is it possible to change the way an image is called in a vue?
thanks.
<template lang="pug">
.container
img(src="../assets/image/logo.png")
//- img(style='{ "width" : "200px" , "height" : "200px" }' :style="{backgroundImage : logoSrcUrl }")
//- img(:src="logoSrc")
//- img(:src="logoSrcUrl")
//- img(:src="logoSrcRequire")
img(:src="getImg(this.$props.imgSrc)")
img(:src="stringRequire")
//- img(:src="logoSrcData")
//- img(:src="logoSrcDataUrl")
</template>
<script>
export default {
props : {
"imageDir" : String,
"imgSrc" : String,
},
data(){
return {
logoSrcData : '',
}
},
computed : {
logoSrc(){
return this.$props.imageDir + this.$props.imgSrc
},
logoSrcRequire(){
return require(this.logoSrcData)
},
stringRequire(){
return require("../assets/image/logo.png")
},
logoSrcUrl(){
return `url(${this.$props.imageDir}${this.$props.imgSrc})`
},
logoSrcDataUrl(){
return `url(${this.logoSrcData})`
},
},
methods : {
getImg(fileName){
return require('../assets/image/' + fileName)
}
},
created() {
console.log(this.$props.imageDir) // ../assets/image/
console.log(this.$props.imgSrc) // logo.png
this.$data.logoSrcData = this.$props.imageDir + this.$props.imgSrc
console.log(this.logoSrcData) // ../assets/image/logo.png
},
}
</script>
<style scoped>
</style>
In addition, when bundling with WebPack, can I implement additional work to change the hash value only for the changed image? Or does WebPack need a pre-bundler because it does not refer to previous bundling files?
vue.js
asked Nov 8 at 2:28
ParkDyel
3619
1
the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? cli.vuejs.org/guide/…
– cal_br_mar
Nov 8 at 2:36
the purpose is to load the image with a string variable. ps. I am sorry that my English skills were not good and I did not write the message clearly.
– ParkDyel
Nov 8 at 3:15
The documentation around this isn't great but you need torequirethe image path in order for Webpack to bundle it.
– Phil
Nov 8 at 4:29
Possible duplicate of Vue.js dynamic images not working
– Phil
Nov 8 at 4:32
1
Thank you. I failed this document with computed for the last time, but this time I have access with methods. thanks!
– ParkDyel
Nov 8 at 5:31
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
[DONE] A non-comment is a loaded
I just start using vue.js with "vue-cli" just now.
but, now I faced a problem.
purpose : I want the parent component to pass the image path to the child component as a string, and the child to load the image using it.
However, in the process of bundling the webpack, It can not call it unless it have to do hash processing like other images, only first image components work.
Do I need to configure vue.config.js differently?
Or is it possible to change the way an image is called in a vue?
thanks.
<template lang="pug">
.container
img(src="../assets/image/logo.png")
//- img(style='{ "width" : "200px" , "height" : "200px" }' :style="{backgroundImage : logoSrcUrl }")
//- img(:src="logoSrc")
//- img(:src="logoSrcUrl")
//- img(:src="logoSrcRequire")
img(:src="getImg(this.$props.imgSrc)")
img(:src="stringRequire")
//- img(:src="logoSrcData")
//- img(:src="logoSrcDataUrl")
</template>
<script>
export default {
props : {
"imageDir" : String,
"imgSrc" : String,
},
data(){
return {
logoSrcData : '',
}
},
computed : {
logoSrc(){
return this.$props.imageDir + this.$props.imgSrc
},
logoSrcRequire(){
return require(this.logoSrcData)
},
stringRequire(){
return require("../assets/image/logo.png")
},
logoSrcUrl(){
return `url(${this.$props.imageDir}${this.$props.imgSrc})`
},
logoSrcDataUrl(){
return `url(${this.logoSrcData})`
},
},
methods : {
getImg(fileName){
return require('../assets/image/' + fileName)
}
},
created() {
console.log(this.$props.imageDir) // ../assets/image/
console.log(this.$props.imgSrc) // logo.png
this.$data.logoSrcData = this.$props.imageDir + this.$props.imgSrc
console.log(this.logoSrcData) // ../assets/image/logo.png
},
}
</script>
<style scoped>
</style>
In addition, when bundling with WebPack, can I implement additional work to change the hash value only for the changed image? Or does WebPack need a pre-bundler because it does not refer to previous bundling files?
vue.js
asked Nov 8 at 2:28
ParkDyel
3619
[DONE] A non-comment is a loaded
I just start using vue.js with "vue-cli" just now.
but, now I faced a problem.
purpose : I want the parent component to pass the image path to the child component as a string, and the child to load the image using it.
However, in the process of bundling the webpack, It can not call it unless it have to do hash processing like other images, only first image components work.
Do I need to configure vue.config.js differently?
Or is it possible to change the way an image is called in a vue?
thanks.
<template lang="pug">
.container
img(src="../assets/image/logo.png")
//- img(style='{ "width" : "200px" , "height" : "200px" }' :style="{backgroundImage : logoSrcUrl }")
//- img(:src="logoSrc")
//- img(:src="logoSrcUrl")
//- img(:src="logoSrcRequire")
img(:src="getImg(this.$props.imgSrc)")
img(:src="stringRequire")
//- img(:src="logoSrcData")
//- img(:src="logoSrcDataUrl")
</template>
<script>
export default {
props : {
"imageDir" : String,
"imgSrc" : String,
},
data(){
return {
logoSrcData : '',
}
},
computed : {
logoSrc(){
return this.$props.imageDir + this.$props.imgSrc
},
logoSrcRequire(){
return require(this.logoSrcData)
},
stringRequire(){
return require("../assets/image/logo.png")
},
logoSrcUrl(){
return `url(${this.$props.imageDir}${this.$props.imgSrc})`
},
logoSrcDataUrl(){
return `url(${this.logoSrcData})`
},
},
methods : {
getImg(fileName){
return require('../assets/image/' + fileName)
}
},
created() {
console.log(this.$props.imageDir) // ../assets/image/
console.log(this.$props.imgSrc) // logo.png
this.$data.logoSrcData = this.$props.imageDir + this.$props.imgSrc
console.log(this.logoSrcData) // ../assets/image/logo.png
},
}
</script>
<style scoped>
</style>
In addition, when bundling with WebPack, can I implement additional work to change the hash value only for the changed image? Or does WebPack need a pre-bundler because it does not refer to previous bundling files?
vue.js
vue.js
asked Nov 8 at 2:28
ParkDyel
3619
asked Nov 8 at 2:28
ParkDyel
3619
edited Nov 8 at 5:29
asked Nov 8 at 2:28
ParkDyel
3619
asked Nov 8 at 2:28
ParkDyel
3619
asked Nov 8 at 2:28
ParkDyel
3619
3619
1
the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? cli.vuejs.org/guide/…
– cal_br_mar
Nov 8 at 2:36
the purpose is to load the image with a string variable. ps. I am sorry that my English skills were not good and I did not write the message clearly.
– ParkDyel
Nov 8 at 3:15
The documentation around this isn't great but you need torequirethe image path in order for Webpack to bundle it.
– Phil
Nov 8 at 4:29
Possible duplicate of Vue.js dynamic images not working
– Phil
Nov 8 at 4:32
1
Thank you. I failed this document with computed for the last time, but this time I have access with methods. thanks!
– ParkDyel
Nov 8 at 5:31
add a comment |
1
the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? cli.vuejs.org/guide/…
– cal_br_mar
Nov 8 at 2:36
the purpose is to load the image with a string variable. ps. I am sorry that my English skills were not good and I did not write the message clearly.
– ParkDyel
Nov 8 at 3:15
The documentation around this isn't great but you need torequirethe image path in order for Webpack to bundle it.
– Phil
Nov 8 at 4:29
Possible duplicate of Vue.js dynamic images not working
– Phil
Nov 8 at 4:32
1
Thank you. I failed this document with computed for the last time, but this time I have access with methods. thanks!
– ParkDyel
Nov 8 at 5:31
1
1
the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? cli.vuejs.org/guide/…
– cal_br_mar
Nov 8 at 2:36
the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? cli.vuejs.org/guide/…
– cal_br_mar
Nov 8 at 2:36
the purpose is to load the image with a string variable. ps. I am sorry that my English skills were not good and I did not write the message clearly.
– ParkDyel
Nov 8 at 3:15
the purpose is to load the image with a string variable. ps. I am sorry that my English skills were not good and I did not write the message clearly.
– ParkDyel
Nov 8 at 3:15
The documentation around this isn't great but you need to
require the image path in order for Webpack to bundle it.– Phil
Nov 8 at 4:29
The documentation around this isn't great but you need to
require the image path in order for Webpack to bundle it.– Phil
Nov 8 at 4:29
Possible duplicate of Vue.js dynamic images not working
– Phil
Nov 8 at 4:32
Possible duplicate of Vue.js dynamic images not working
– Phil
Nov 8 at 4:32
1
1
Thank you. I failed this document with computed for the last time, but this time I have access with methods. thanks!
– ParkDyel
Nov 8 at 5:31
Thank you. I failed this document with computed for the last time, but this time I have access with methods. thanks!
– ParkDyel
Nov 8 at 5:31
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53200703%2fpass-image-path-to-child-from-parent-in-vue-js-with-vue-cli%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
1
the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? cli.vuejs.org/guide/…
– cal_br_mar
Nov 8 at 2:36
the purpose is to load the image with a string variable. ps. I am sorry that my English skills were not good and I did not write the message clearly.
– ParkDyel
Nov 8 at 3:15
The documentation around this isn't great but you need to
requirethe image path in order for Webpack to bundle it.– Phil
Nov 8 at 4:29
Possible duplicate of Vue.js dynamic images not working
– Phil
Nov 8 at 4:32
1
Thank you. I failed this document with computed for the last time, but this time I have access with methods. thanks!
– ParkDyel
Nov 8 at 5:31