skip to Main Content

I come from a React background but I have to use Vue (first-time) for a code assessment. I tried creating a re-usable image component with wai-aria accessibility but whatever I try, the image itself will not show up. Only the ALT-text will show. The WAI-ARIA works properly. The core issue is the image not showing up here. I have asked GPT, Bard, Discord servers (no responses), tried YouTube, but I cannot find a solution to my problem.

Image component code:

<template>
    <div>
        <img :src="imageName" :alt="imageAlt" />
        <span aria-label="imagecontent" role="contentinfo" class="aria">{{ ARIAText }}</span>
    </div>
</template>

<style>
.aria {
    height: 1px;
    width: 1px;
    position: absolute;
    overflow: hidden;
    top: -10px;
};
</style>

<script>
export default {
    name: 'ImageComp',
    props: {
        imageName: String, 
        imageAlt: String,
        ARIAText: String
    },
};
</script>

Main component:

<template>
    <header>
            <ImageComp imageName="../assets/icons/logo.png" imageAlt="****** Logo"
                ARIAText="This is the logo of *****. Dit is het logo van ******" />
    </header>
</template>

<script>
import ImageComp from './ImageComp.vue';


export default {
    name: 'TopBanner',
    components: {
        ImageComp,
    },
     props: {
        imageName: String,
        imageAlt: String,
        ARIAText: String
    },
};
</script>

I have tried to importing the image the react way as a component and use the component as the image SRC, that did not work, I tried require, require@, I tried using different images, I tried deleting the style applied from the .aria element, nothing works. I tried asking AI, Webdev discords, tried YouTube video’s. I am at a complete loss. What do I need to do?

2

Answers


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

    Login or Signup to reply.
  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search