카카오 링크 SendDefault 에서 이미지가 보이지 않습니다

카카오 링크 SendDefault 에서 content 에서
feed type 으로 설정후 content에 imageUrl에 이미지주소를 넘겨도 카카오톡으로 보낼때 경우에 따라 이미지가 보내지지 않습니다.

  • 아래 코드의 if (data.pageID == ‘startPage’){ 일때는 공유 이미지가 보임
  • 아래 코드의 } else { 로 들어가게 되면 공유 이미지가 보이지 않음

브라우저 콘솔로 이미지 주소 가져오는지 확인 해 봤을때는 둘 다 문제없이 이미지를 가져오고 있습니다.
(아래 링크에서 h지워주시면 접속됩니다)
hhttps://advancer-rrs.click/static/media/%EC%A7%84%EB%8F%84%EC%A4%80_.db8fd8e0e3827366d024.jpg

아래와 같이 소스 사용하고 있습니다.
초기화 등 저희 코드의 문제인지… 카카오의 어떠한 캐시 문제인지… 궁금합니다

import React from 'react';
import Button from 'react-bootstrap/Button';
import POSTER from '../assets/poster.png';
const { Kakao } = window;
const KakaoShareBtn = ({data}) => {
    const url = "https://advancer-rrs.click/";
    let ShareURL, ShareDesc, ShareImg, ShareTitle;
    if (data.pageID == 'startPage'){
        ShareURL = url;
        ShareDesc = "내가 환생한다면 재벌집 누구?";
        ShareImg = "https://advancer-rrs.click" + POSTER;
        ShareTitle = '테스트 하러가기';
    } else {
        ShareURL = url+`result/${data.data.token}`;
        ShareDesc = `당신은 ${data.data.name} 입니다!`
        ShareImg = "https://advancer-rrs.click" + data.data.image;
        ShareTitle = '친구 결과보고 테스트 해보기';
    }
    React.useEffect(() => {
        Kakao.cleanup();
        Kakao.init("06a6a2249ead31c4d0f4ddb7a7df607e");
    },[]);
    const shareKakao = () => {
        Kakao.Share.sendDefault({
            objectType: 'feed',
            content: {
            title: '재벌집 막내 테스트 결과',
            imageUrl: ShareImg,
            link: {
                mobileWebUrl: ShareURL,
                webUrl: ShareURL,
            },
            description: ShareDesc,
            },
            social: {
            likeCount: 2186,
            sharedCount: 31088,
            viewCount: 32072,
            },
            buttons: [
            {
                title: ShareTitle,
                link: {
                mobileWebUrl: ShareURL,
                webUrl: ShareURL,
                },
            },
            ]
        }); }
        return (
            <Button
            style={{backgroundColor: 'yellow', color:'black', borderColor:'yellow'}} onClick={shareKakao}>카카오톡 공유하기</Button>
        );
}
export default KakaoShareBtn;

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.


앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다

ex) 123456

1개의 좋아요

839617 입니다 감사합니다

한글 이미지 주소를 encoding 부탁드립니다.
ex)

imageUrl: encodeURI('https://advancer-rrs.click/static/media/진양철_.0ff0ae7fde93287c0cad.jpg')
1개의 좋아요

감사합니다 덕분에 해결했습니다.

다만 궁금한게 한가지 있다면… 초기 배포시 이미지 파일도 한글 이였는데 원활히 동작했었습니다.
혹시 이에 대한 인사이트를 얻을 수 있을까요?

한글 주소를 사용하지 않으시는게 좋을것 같습니다.

공유하기에 사용되는 이미지는 사용자에게 곧바로 제공되지 않고 카카오 서버에서 스크랩 한뒤 최적화 하여 제공하게 됩니다. 이미지 URL에 인코딩 대상이 되는 문자가 발견된 경우 카카오에서 자동으로 처리하여 스크랩 시도하게 되지만, 한글은 인코딩(완성,조합) 방식에 따라 서비스측에서 실제 저장된 파일명과 차이가 발생할수도 있습니다.

1개의 좋아요