[Vuejs]-Vue.js – Image not showing up

by

0👍

ImageName must be an URL not path. Like a simple img with html

0👍

Refer this : 
<template>
    <div class="container">
        <h4>On Number Add Show Image</h4>

        <div class="row">
            <div class="col-8 border">
                <form action="" @submit.prevent="showImage(number)" ref="form">
                    <label for="number" class="form-label text-start">Image Number :</label>
                    <input type="number" class="form-control required" name="number" id="number" v-model="number"
                        ref="number" /><br>
                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                </form>
            </div>
            <div class="col-4 border">
                <button type="submit" @click="reset()" class="btn btn-primary mt-3">Reset</button>
                <h6 class="mt-3">List to Number Present</h6>
                <pre>
                    {{Object.keys(images)}}
                </pre>
            </div>
        </div>
        <OnInputImageShow :url="url"/>
    </div>
</template>
<script>
import OnInputImageShow from "./OnInputImageShow.vue";
export default {
    name: 'OnInputImage',
    components:{
        OnInputImageShow,
    },
    data() {
        return {
            number: '',
            url: '',
            images: [
                'data:image/png;base64,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',
                'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg',
                'data:image/jpeg;base64,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',
                'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg',
            ]
        }
    },
    methods: {
        showImage(number) {
            // console.log(number);
            this.url = this.images[number];
        },
        reset(){
            this.url = '';
            this.number ='';
        }

    },
    mounted() {
        this.url = '';
    },

}
</script>
<style></style>

----------------------
OnInputImageFormShow.vue
<template>
    <div class="row border">
        <div class="col d-flex justify-content-center">
            <img :src="url" v-if="url" width="350" height="300">
        </div>
    </div>
</template>
<script>
export default {
    name: 'OnInputImageShow',
    props: [
        'url'
    ],
}
</script>
<style></style>

Leave a comment