1

[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?

ParkDyel
  • 262
  • 2
  • 4
  • 19
  • 1
    the question is, do you want webpack to bundle your images? or do you want relative paths towards your public assets? https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports – calmar Nov 08 '18 at 02: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 08 '18 at 03: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 08 '18 at 04:29
  • Possible duplicate of [Vue.js dynamic images not working](https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working) – Phil Nov 08 '18 at 04: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 08 '18 at 05:31

1 Answers1

0

  1. import img1 from '../../assets/img.png'

  2. data(){ return{ img2:img1 } }

  3. <XComponent :mySrc="img2" />

mohammad rezaei
  • 24
  • 1
  • 2
    The provided answer was flagged for review as a Low Quality Post. Here are some guidelines for [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). This provided answer may be correct, but it could benefit from an explanation. Code only answers are not considered "good" answers. From [review](https://stackoverflow.com/review). – MyNameIsCaleb Sep 25 '19 at 20:52