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
ImageName must be an URL not path. Like a simple img with html