GitHub README.md에 이미지 직접 삽입
최근에 저는 GitHub에 가입하여 그곳에서 일부 프로젝트를 호스팅하기 시작했습니다. 제가 겪은 작업 중 하나는 README 파일에 이미지를 포함해야 한다는 것이었습니다.
솔루션을 검색했음에도 불구하고 제가 찾은 것은 타사 웹 서비스에 이미지를 호스팅하고 해당 이미지에 연결하라는 제안뿐이었습니다. 외부 호스팅에 의존하지 않고 직접 이미지를 추가하는 방법이 있나요?
명령 | 설명 |
---|---|
base64.b64encode() | 바이너리 데이터를 Base64 문자열로 인코딩하며, Markdown에 이미지를 직접 삽입하는 데 유용합니다. |
.decode() | Base64 바이트를 문자열로 변환하여 HTML/Markdown에 포함할 수 있도록 준비합니다. |
with open("file", "rb") | 이미지 데이터를 읽는 데 필요한 바이너리 읽기 모드로 파일을 엽니다. |
read() | 인코딩을 위해 이미지 데이터를 읽는 데 사용되는 파일의 내용을 읽습니다. |
write() | 여기에서 Base64로 인코딩된 문자열을 텍스트 파일로 출력하는 데 사용되는 파일에 데이터를 씁니다. |
f-string | HTML img 태그에 인코딩된 이미지를 삽입하는 데 사용되는 문자열 리터럴 내에 표현식을 삽입하기 위한 Python 구문입니다. |
GitHub README.md에 이미지를 삽입하는 방법
위에 제공된 스크립트는 타사 호스팅 서비스에 의존하지 않고 GitHub README.md 파일에 이미지를 추가하는 다양한 방법을 보여줍니다. 첫 번째 스크립트는 이미지를 Base64로 인코딩된 문자열로 변환합니다. 이 방법을 사용하면 README 파일에 이미지를 직접 삽입할 수 있으므로 유용합니다. 그만큼 명령은 이진 읽기 모드에서 이미지 파일을 열어 스크립트가 이미지 데이터를 읽을 수 있도록 합니다. 그만큼 line은 이미지 데이터를 Base64 문자열로 인코딩하고 HTML에 삽입하기에 적합한 형식으로 디코딩합니다. 마지막으로 스크립트는 이 인코딩된 문자열을 HTML 형식의 텍스트 파일에 씁니다. 꼬리표.
두 번째 스크립트는 GitHub의 원시 URL 기능을 사용하여 이미지를 삽입하는 방법을 보여줍니다. 이미지를 저장소에 직접 업로드하고 원시 URL을 복사하면 README.md 파일에서 이 URL을 참조할 수 있습니다. 명령 Markdown에서 이미지 링크의 형식을 지정하는 방법을 보여줍니다. 이 방법은 간단하고 추가 인코딩이 필요하지 않지만 저장소에서 사용 가능한 이미지에 의존합니다. 세 번째 방법은 상대 경로를 사용하여 저장소에 저장된 이미지를 참조합니다. 이미지를 특정 디렉터리에 업로드한 후 상대 경로를 사용할 수 있습니다. README.md에 있습니다. 이 접근 방식은 디렉터리 구조가 일관되게 유지되는 한 저장소의 다양한 분기 및 포크 내에서 이미지 링크 기능을 유지합니다.
Base64 인코딩을 사용하여 GitHub README.md에 이미지 삽입
Base64 인코딩용 Python 스크립트
import base64
with open("image.png", "rb") as image_file:
encoded_string = base64.b64encode(image_file.read()).decode()
with open("encoded_image.txt", "w") as text_file:
text_file.write(f"<img src='data:image/png;base64,{encoded_string}'>")
원시 콘텐츠 URL을 통해 GitHub README.md에 이미지 추가
GitHub의 원시 URL 기능 사용
1. Upload your image to the repository (e.g., /images/image.png)
2. Copy the raw URL of the image: https://raw.githubusercontent.com/username/repo/branch/images/image.png
3. Embed the image in your README.md:
![Alt text](https://raw.githubusercontent.com/username/repo/branch/images/image.png)
상대 경로를 사용하여 마크다운을 통해 README.md에 이미지 삽입
마크다운에서 상대 경로 사용
1. Upload your image to the repository (e.g., /images/image.png)
2. Use the relative path in your README.md:
![Alt text](images/image.png)
3. Commit and push your changes to GitHub
GitHub Actions를 사용하여 README.md에 이미지 삽입
타사 호스팅을 사용하지 않고 GitHub README.md 파일에 이미지를 포함하는 또 다른 방법은 GitHub Actions를 사용하여 이미지 포함 프로세스를 자동화하는 것입니다. GitHub Actions는 저장소에서 직접 워크플로를 자동화할 수 있습니다. 예를 들어 이미지를 Base64로 자동 변환하고 README.md 파일을 업데이트하는 워크플로를 만들 수 있습니다. 이 접근 방식을 사용하면 저장소의 특정 폴더에 추가된 모든 이미지가 자동으로 인코딩되어 README에 포함됩니다.
이러한 워크플로를 설정하려면 다음 위치에 YAML 파일을 생성해야 합니다. 저장소의 디렉토리입니다. 이 파일은 저장소 체크아웃, 이미지 인코딩을 위한 스크립트 실행, 변경 사항을 저장소에 다시 커밋하는 등 작업 흐름의 단계를 정의합니다. 이 프로세스를 자동화하면 수동 개입 없이 README.md를 최신 이미지로 업데이트하여 효율성을 높이고 효율적인 작업 흐름을 유지할 수 있습니다.
- 내 GitHub 저장소에 이미지를 어떻게 업로드하나요?
- 이미지를 GitHub의 파일 보기로 끌어서 놓거나 다음을 사용하여 이미지를 업로드할 수 있습니다. 명령 다음에 그리고 .
- Base64 인코딩이란 무엇입니까?
- Base64 인코딩은 ASCII 문자를 사용하여 이진 데이터를 텍스트 형식으로 변환하므로 이미지와 같은 이진 파일을 텍스트 문서에 삽입하는 데 적합합니다.
- GitHub에서 이미지의 원시 URL을 어떻게 얻을 수 있나요?
- 저장소에서 이미지를 클릭한 후 "다운로드" 버튼을 클릭하세요. 원시 URL은 브라우저의 주소 표시줄에 표시됩니다.
- README.md에서 이미지에 상대 경로를 사용하는 이유는 무엇입니까?
- 상대 경로는 이미지 링크가 저장소의 다양한 분기 및 포크 내에서 계속 작동하도록 보장합니다.
- GitHub Actions를 사용하여 이미지 삽입을 자동화할 수 있나요?
- 예, GitHub Actions로 워크플로를 생성하여 이미지를 자동으로 인코딩하고 README.md 파일을 업데이트할 수 있습니다.
- GitHub Actions를 사용하려면 특별한 권한이 필요합니까?
- 리포지토리에 대한 쓰기 액세스 권한이 있는 한 GitHub Actions 워크플로를 생성하고 실행할 수 있습니다.
- README.md에서 Base64 인코딩을 사용하면 어떤 이점이 있나요?
- 이미지를 Base64로 인코딩된 문자열로 포함하면 해당 이미지가 README.md 파일 내에 자체적으로 포함되어 외부 이미지 호스팅에 대한 종속성이 제거됩니다.
- README.md에 애니메이션 GIF를 포함할 수 있나요?
- 예, 직접 링크, Base64 인코딩 또는 상대 경로 등 설명된 것과 동일한 방법을 사용하여 애니메이션 GIF를 삽입할 수 있습니다.
GitHub README.md 파일에 이미지를 포함하면 프로젝트의 시각적 매력과 명확성이 향상됩니다. Base64 인코딩, 원시 URL, 상대 경로 등의 방법을 활용하면 외부 호스팅 서비스에 의존하지 않고도 이미지를 효과적으로 포함할 수 있습니다. GitHub Actions로 이 프로세스를 자동화하면 이미지 관리가 더욱 단순화됩니다. 이러한 전략은 작업에 대한 전문적이고 세련된 프레젠테이션을 유지하는 데 도움이 되며 저장소를 더욱 매력적이고 유익하게 만듭니다.