앱에 유니 아이콘이 표시되지 않는 문제 해결 방법

uni 아이콘이 앱에 표시되지 않는 문제에 대한 해결 방법: 1. H5가 아닌 터미널에서 지원되지 않는 vue 구문을 사용하지 마세요. 2. 구성 요소 내부에 스타일을 작성하세요. 3. "url(https:/ /alicdn.net)" ; 4. 휴대폰으로 접속 가능한 IP를 이용하여 네트워크 테스트를 진행합니다.

이 글의 운영 환경: Windows 7 시스템, uni-app 버전 2.5.1, DELL G3 컴퓨터

uni 아이콘이 앱에 표시되지 않나요?

uniapp에서는 iconfont 아이콘을 도입하여 실제 기기에서 iconfont가 표시되지 않는 문제를 해결합니다

1. uniapp에 iconfont 아이콘을 도입하는 방법

1. 먼저 iconfont 웹사이트에서 프로젝트 파일을 다운로드하세요. 그림에 표시된 대로:

2. 다운로드한 iconfont 파일의 압축을 풀고 iconfont.css를 프로젝트 디렉토리에 넣으세요

3. 그리고 클릭해서 코드를 복사하세요. ttf 형식의 주소만 있으면 됩니다

4. 프로젝트에서 iconfont.css 파일을 열고 복사한 ttf 형식 코드를 @font-face에 작성하세요.

@font-face {
　　font-family: "iconfont";
　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}

5. 마지막으로 App.vue

6의 스타일 태그에 iconfont.css를 추가하세요.

2. 실제 기기에서 아이콘 폰트가 표시되지 않는 문제 해결

문제: 위 작업 후 H5에서는 아이콘 폰트 아이콘이 정상적으로 표시되지만, 실제 기기 앱에서 디버깅할 때 발견됩니다. 아이콘 표시가 성공적이지 않습니다.

해결 방법: 공식 링크: https://uniapp.dcloud.io/matter

1. H5 이외의 쪽에서는 지원하지 않는 vue 구문을 사용하고 있으며, mini에서는 작성 방법이 제한됩니다. 자세한 내용은

를 참조하세요.

2. 컴포넌트가 참조되는 컴포넌트 속성에 style="xx"를 직접 쓰지 마세요.

3. /alicdn.net)을 url(https:// alicdn.net)로 변경합니다. 왜냐하면 // 앱 측에 파일 프로토콜이 있기 때문입니다

4. 많은 사람들이 연결할 때 로컬 테스트 서비스 주소(localhost 또는 127.0.0.1)를 사용합니다. H5 쪽에서는 이러한 네트워킹 주소에 접속할 수 없습니다. 휴대폰에서 접속할 수 있는 IP를 사용하여 인터넷에 연결하세요

@font-face {
　　font-family: "iconfont";
　　src: url('//at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}// 改为这样即可：@font-face {
　　font-family: "iconfont";
　　src: url('https://at.alicdn.com/t/font_2277759_0seoqjijl89r.ttf') format('truetype');
}

추천 학습: "uni-app tutorial"

위 내용은 앱에 유니 아이콘이 표시되지 않는 문제 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!