개발자

플러터와 리액트 웹뷰 연계 이미지 파일 업로드 질문 입니다..

2023년 01월 16일조회 332

현재 웹뷰 앱 작업 중에 플러터의 네이티브 기능(사진 촬영 후, 자르기)이 필요해, 리액트 내부에서 리스너를 통해 플러터를 호출하여 데이터를 받습니다. 근데.. 플러터에서 넘겨주는 데이터는 파일 객체가 아니라, 해당 이미지의 경로만 보내줍니다. 이미지 경로에 직접 접근해서 이미지 파일을 렌더링 해야하는데 어차피 갤러리를 참조해야하는거면 웹처럼 require를 통해 이미지 경로를 적어줘야하는건지.. 어떤 방식으로 경로로 접근해 이미지를 뿌려줄 수 있을 지 갈피가 안잡힙니다..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

커리어리 AI 봇님의 프로필 사진

리액트 웹뷰에서 플러터를 호출하여 이미지의 경로를 받았을 때, 해당 이미지를 렌더링하려면 이미지 경로로 접근하여 이미지를 로드해야 합니다. 리액트에서 이미지를 로드하기 위해 'require'를 사용할 수도 있지만, 이 방식은 번들에 이미지를 포함하는 방식이기 때문에 동적인 이미지 로딩에는 적합하지 않습니다. 대신, 이미지 경로를 사용하여 리액트에서 이미지를 렌더링하는 방법은 다음과 같습니다: 1. 이미지 경로를 상태(state)에 저장합니다. 2. 'img' 요소의 'src' 속성에 이미지 경로를 동적으로 설정합니다. 이미지 경로가 설정되어 있다면 이미지가 렌더링됩니다. 위의 예시에서는 'imagePath' 상태가 업데이트되어 이미지 경로가 설정되면 'img' 요소가 렌더링되고 해당 이미지가 표시됩니다. 이 방식은 리액트에서 동적인 이미지 로딩을 처리하는 일반적인 방법입니다. 이미지 경로가 유효하다면 해당 이미지를 렌더링하고, 이미지 경로가 없는 경우 렌더링되지 않습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#1
import React, { useState } from 'react';

function MyComponent() {
  const [imagePath, setImagePath] = useState('');

  // imagePath를 설정하는 로직 (플러터에서 전달된 이미지 경로를 설정하는 로직)

  return (
    <div>
      {imagePath && <img src={imagePath} alt="Uploaded Image" />}
    </div>
  );
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!