2022-05-30

svelte can't display image from fastify

i want to fetch image from fastify and display it in svelte, when i visit the server url(http://localhost:3000/image/Darkaron.jpg), it worked, but when i visit it from svelte url(http://localhost:8080/image/Darkaron.jpg), it refuse to show and give me this error.

https://i.postimg.cc/HsKwYkpK/image-error.png

server code:

import fastify from "fastify"
import fstatic from "@fastify/static"
import cors from "@fastify/cors";

const imagePath = '/storage'

type FileResponse = {
    filename: string
}

const server = fastify({
    logger: true
})
server.register(fstatic, {
    root: imagePath
})
server.register(FastifyMultipart)
server.register(cors, {
    origin: "*",
    methods: ["OPTIONS", "GET", "POST"]
})

server.get("/image/:filename", (req, res) => {
    res.sendFile((req.params as FileResponse).filename)
})

const start = async () => {
    try {
        await server.listen(3000)
    } catch (err) {
        server.log.error(err)
        process.exit(1)
    }
}
start()

svelte code

<script lang="ts">
import axios from "axios";
import { onMount } from "svelte";

onMount(async function() {
    let res = await axios({
        method: 'GET',
        url: 'http://localhost:3000/image/Darkaron.jpg'
    })
    console.log(res.data)
})
</script>

<div>check console</div>


No comments:

Post a Comment