I am currently working on a project to create a simple program that retrieves movies from my AWS-S3 bucket and transforms them into picture thumbnails.
Below is the code I have written:
<template>
<img :src="imgURL" class="card-top" alt="thumb_nail">
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
props: {
url: {
type: String,
required: true,
},
},
setup(props) {
const imgURL = ref("")
const video = document.createElement("video");
video.src = props.url;
video.addEventListener("loadeddata", () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
imgURL.value = ctx.canvas.toDataURL("image/jpeg");
})
return { url: props.url, imgURL };
},
});
</script>
Home.vue
<template>
<Thumbnail src="aws-s3_bucket_url" />
</template>
<script>
import { defineComponent, ref } from "vue";
import Thumbnail from "../components/Thumbnail.vue"
export default defineComponent({
components: {
Thumbnail
}
});
</script>
Although there are no errors in the code, the image is not displaying. The dimensions are set correctly, but the image is not showing up.