React-native 이미지 uri에 한글이 있을 경우 이미지를 어떻게 가져오나요?

제목 그대로 이미지 주소에 한글이 섞여 있을 때 이미지를 제대로 가져오지 못합니다. 현재 이미지 주소의 이름을 바꿀 수 가 없는 상태라 한글을 인식할 수 있게 하는 방법이 있을까요?

encodeURI() 를 했는데도 안되는건가요?

@esadgsaee 혹시 간단하게 reproducible demo를 만들어주실 수 있을까요? 그래주시면 한번 확인해보겠습니다~

2021/01/06/%EB%AC%B4%EC%A0%9C-1-01.jpg

Url 경로 주소값 자체는 이런 식으로 되어있습니다. encodeURI아 decodeURI를 사용해도 이미지가 나타니지가 않네요. 인터넷으로 다른 이미지 경로를 가져와서 붙여보면 잘 나오기에 이 경로가 문제인 것 같습니다.

데모는 어떻게 어떻게 만들어야 하는지 모르겠어요 ㅠㅠ

간단하게 안되는 현상의 프로젝트를 만들어주시거나 안나오는 URI를 공유해주시면 됩니다.

https://www.mgx.kr/media/thumbnail/2021/01/06/무제-1-01.jpg

테스트로 사용하는 Uri 주소입니다. 인터넷 주소창에 입력시에는 잘 나오는데 React Native에서는 이미지가 안나오네요.

제가 할 땐 잘 나오네요~

RN 버전 등등 상세하게 안되는 케이스를 재현해주셔야 할 것 같습니다 ㅠ

                    <TouchableOpacity onPress={()=> alert("준비 중 입니다")}>

                        <Image  style={{width: "100%", height: "100%", backgroundColor: "red"}} resizeMode="stretch" 

                                source={{uri: 'https://www.mgx.kr/media/thumbnail/2021/01/06/무제-1-01.jpg'}}/>

                    </TouchableOpacity>

                </View>

{

“name”: “TestPro”,

“version”: “0.0.1”,

“private”: true,

“scripts”: {

"android": "react-native run-android",

"ios": "react-native run-ios",

"start": "react-native start",

"test": "jest",

"lint": "eslint ."

},

“dependencies”: {

"@expo/vector-icons": "12.0.2",

"@react-native-community/masked-view": "0.1.10",

"@react-navigation/drawer": "5.11.4",

"@react-navigation/native": "5.8.10",

"@react-navigation/stack": "5.12.8",

"base-64": "1.0.0",

"body-parser": "1.19.0",

"express": "4.17.1",

"mysql": "2.18.1",

"react": "16.13.1",

"react-native": "0.63.4",

"react-native-drawer": "2.5.1",

"react-native-gesture-handler": "1.9.0",

"react-native-layout-grid": "0.0.2",

"react-native-my-sql-connection": "1.0.4",

"react-native-reanimated": "1.13.2",

"react-native-safe-area-context": "3.1.9",

"react-native-screens": "2.16.1",

"react-navigation": "4.4.3",

"react-navigation-drawer": "2.6.0",

"utf8": "3.0.0"

},

“devDependencies”: {

"@babel/core": "7.12.10",

"@babel/runtime": "7.12.5",

"@react-native-community/eslint-config": "1.1.0",

"babel-jest": "25.5.1",

"eslint": "6.8.0",

"jest": "25.5.4",

"metro-react-native-babel-preset": "0.59.0",

"react-test-renderer": "16.13.1"

},

“jest”: {

"preset": "react-native"

}

}

현재 이미지의 소스 내용과 package.json의 버전 내용입니다. 버전이 잘 못된걸까요?

이미지엔 문제가 없었네요 ㅠㅠ. 버전에 따른 문제가 있을 수 도 있을까요?

버전과 이미지 소스를 올렸습니다. 이미지는 그냥 이미지에 경로만 집어넣었을 뿐이라 다른 소스를 추가하지는 않았습니다.

버전상으로는 잘못된걸 쉽게 알 수 없을 것 같아요. 시간 되실 때 돌아가는 프로젝트를 하나 파주시고 공유해주시면 테스트 해볼 수 있을 것 같습니다~

이미지를 제대로 가져오지 못한다는 것이 오류는 없는데 화면에 보이질 않는다는 말씀인가요…?

혹시 모르니, image의 width, height 값을 %가 아니라 직접 값을 넣어보세요

style= {{width: 80, height: 80}}

좋아요 1

오우 좋은 지적이십니다. 실제로 위와 같이 코드를 짜시면 parent width가 0 일 때는 안보이게 됩니다.

좋아요 1

네 맞습니다. 화면을 열었을 때 오류 업이 잘 열리는데 이미지는 나오지 않네요.
style에 직접 값을 넣었지만 이미지는 안나오는 중이네요 ㅠㅠ.

나중에 테스트 파일을 만들어서 올려보겠습니다.