I'm currently trying to implement a feature in Vue.js where images switch on click. The functionality I'm aiming for is as follows:
Upon initial load, the image displays in black, then upon clicking/selecting it, the image transitions into a blue version.
I want this process to be dynamic, but I've encountered some challenges along the way. The images are named imageOne, and upon selection, I want them to change to imageOneBlue. Similarly, I have imageTwo which should switch to imageTwoBlue.
The issue I'm facing is that the images aren't appearing on localhost. I've confirmed that the file paths are accurate because when I test with
<img src="../../assets/images/imageOne.png" />Here's the current state of my code:
The component:
<script setup lang="ts">
import { ref, defineProps, computed } from 'vue';
const props = defineProps<{
imageName: string
}>()
const isBlue = ref(false)
const imageSource = computed(() => {
return isBlue.value ? `../../assets/images/${props.imageName}Blue.png` : `../../assets/images/${props.imageName}.png`
})
function toggleImage() {
isBlue.value = !isBlue.value
// This code below works in the console but the images still don't show up on the screen.
console.log('isBlue value:', isBlue.value)
}
</script>
<template>
<div class="option1" @click="toggleImage">
<div class="leftbox">
<img :src="imageSource" class="img" />
</div>
</div>
</template>
This is where I call the component:
<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'
import MakeBlue from '../components/MakeBlue.vue'
</script>
<template>
<div class="container">
<div class="content-container">
<div class="option-container">
<MakeBlue imageName="imageOne" />
<MakeBlue imageName="imageTwo" />
</div>
</div>
</div>
</template>
Any assistance would be highly appreciated as I am relatively new to Vue.js. Thank you!