Fix: Imgae -> img 태그 변경

This commit is contained in:
hyojin 2023-09-11 19:09:14 +09:00
parent b730fbca93
commit 5d240595e9
4 changed files with 18 additions and 14 deletions

View File

@ -22,7 +22,7 @@ COPY . .
# ENV NEXT_TELEMETRY_DISABLED 1 # ENV NEXT_TELEMETRY_DISABLED 1
RUN yarn build # RUN yarn build
# If using npm comment out above and use below instead # If using npm comment out above and use below instead
# RUN npm run build # RUN npm run build

View File

@ -3,7 +3,14 @@ const nextConfig = {
reactStrictMode: true, reactStrictMode: true,
output: 'standalone', output: 'standalone',
images: { images: {
domains: ['13.209.39.139'], remotePatterns: [
{
protocol: 'http',
hostname: '13.209.39.139',
port: '31192',
pathname: '/api/**',
},
],
}, },
compiler: { compiler: {
styledComponents: true, styledComponents: true,

View File

@ -1,3 +1,4 @@
/* eslint-disable @next/next/no-img-element */
'use client'; 'use client';
import React from 'react'; import React from 'react';
@ -22,27 +23,23 @@ function Dashboard() {
<div className="grid grid-cols-8 p-12 h-[calc(100vh-150px)]"> <div className="grid grid-cols-8 p-12 h-[calc(100vh-150px)]">
{getResult.data && ( {getResult.data && (
<> <>
<div className="mt-12 col-span-2"> <div className="mt-20 col-span-2">
<h2 className="text-lg font-semibold text-center">Input Image</h2> <h2 className="text-lg font-semibold text-center">Input Image</h2>
<div className="relative w-full h-[calc(50vh-250px)] mt-2 mb-20 "> <div className="relative w-full h-[calc(50vh-250px)] mt-2 mb-12">
<Image <img
src={getResult.data?.origin.imageUrl} src={getResult.data?.origin.imageUrl}
alt="origin image" alt="origin image"
fill className="w-full h-full"
sizes="100vw, 100vh"
priority
/> />
</div> </div>
<h2 className="text-lg font-semibold text-center"> <h2 className="text-lg font-semibold text-center">
Inference Result Image Inference Result Image
</h2> </h2>
<div className="relative w-full h-[calc(50vh-250px)] mt-2"> <div className="relative w-full h-[calc(50vh-250px)] mt-2">
<Image <img
src={getResult.data?.latest.imageUrl} src={getResult.data?.latest.imageUrl}
alt="inference image" alt="inference image"
fill className="w-full h-full"
sizes="100vw, 100vh"
priority
/> />
</div> </div>
</div> </div>

View File

@ -2,10 +2,10 @@ import { StaticImageData } from 'next/image';
export interface ResultDataType { export interface ResultDataType {
origin: { origin: {
imageUrl: StaticImageData; imageUrl: string;
}; };
latest: { latest: {
imageUrl: StaticImageData; imageUrl: string;
timestamp: number; timestamp: number;
particleSizeRatio: { range: string; count: number }[]; particleSizeRatio: { range: string; count: number }[];
}; };