외부 호스팅 없이 GitHub README.md에 이미지 추가하기

외부 호스팅 없이 GitHub README.md에 이미지 추가하기
외부 호스팅 없이 GitHub README.md에 이미지 추가하기
Arthur Petit
2024년 6월 28일 금요일 오후 1:39:10

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.b64encode() 이미지를 Base64로 인코딩된 문자열로 변환합니다. 이 방법을 사용하면 README 파일에 이미지를 직접 삽입할 수 있으므로 유용합니다. 그만큼 with open("image.png", "rb") 명령은 이진 읽기 모드에서 이미지 파일을 열어 스크립트가 이미지 데이터를 읽을 수 있도록 합니다. 그만큼 encoded_string = base64.b64encode(image_file.read()).decode() line은 이미지 데이터를 Base64 문자열로 인코딩하고 HTML에 삽입하기에 적합한 형식으로 디코딩합니다. 마지막으로 스크립트는 이 인코딩된 문자열을 HTML 형식의 텍스트 파일에 씁니다. 꼬리표.

두 번째 스크립트는 GitHub의 원시 URL 기능을 사용하여 이미지를 삽입하는 방법을 보여줍니다. 이미지를 저장소에 직접 업로드하고 원시 URL을 복사하면 README.md 파일에서 이 URL을 참조할 수 있습니다. 명령 삼 Markdown에서 이미지 링크의 형식을 지정하는 방법을 보여줍니다. 이 방법은 간단하고 추가 인코딩이 필요하지 않지만 저장소에서 사용 가능한 이미지에 의존합니다. 세 번째 방법은 상대 경로를 사용하여 저장소에 저장된 이미지를 참조합니다. 이미지를 특정 디렉터리에 업로드한 후 상대 경로를 사용할 수 있습니다. ![Alt text](images/image.png) 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 파일을 생성해야 합니다. .github/workflows 저장소의 디렉토리입니다. 이 파일은 저장소 체크아웃, 이미지 인코딩을 위한 스크립트 실행, 변경 사항을 저장소에 다시 커밋하는 등 작업 흐름의 단계를 정의합니다. 이 프로세스를 자동화하면 수동 개입 없이 README.md를 최신 이미지로 업데이트하여 효율성을 높이고 효율적인 작업 흐름을 유지할 수 있습니다.

GitHub README.md에 이미지 삽입에 대해 자주 묻는 질문

  1. 내 GitHub 저장소에 이미지를 어떻게 업로드하나요?
  2. 이미지를 GitHub의 파일 보기로 끌어서 놓거나 다음을 사용하여 이미지를 업로드할 수 있습니다. git add 명령 다음에 git commit 그리고 git push.
  3. Base64 인코딩이란 무엇입니까?
  4. Base64 인코딩은 ASCII 문자를 사용하여 이진 데이터를 텍스트 형식으로 변환하므로 이미지와 같은 이진 파일을 텍스트 문서에 삽입하는 데 적합합니다.
  5. GitHub에서 이미지의 원시 URL을 어떻게 얻을 수 있나요?
  6. 저장소에서 이미지를 클릭한 후 "다운로드" 버튼을 클릭하세요. 원시 URL은 브라우저의 주소 표시줄에 표시됩니다.
  7. README.md에서 이미지에 상대 경로를 사용하는 이유는 무엇입니까?
  8. 상대 경로는 이미지 링크가 저장소의 다양한 분기 및 포크 내에서 계속 작동하도록 보장합니다.
  9. GitHub Actions를 사용하여 이미지 삽입을 자동화할 수 있나요?
  10. 예, GitHub Actions로 워크플로를 생성하여 이미지를 자동으로 인코딩하고 README.md 파일을 업데이트할 수 있습니다.
  11. GitHub Actions를 사용하려면 특별한 권한이 필요합니까?
  12. 리포지토리에 대한 쓰기 액세스 권한이 있는 한 GitHub Actions 워크플로를 생성하고 실행할 수 있습니다.
  13. README.md에서 Base64 인코딩을 사용하면 어떤 이점이 있나요?
  14. 이미지를 Base64로 인코딩된 문자열로 포함하면 해당 이미지가 README.md 파일 내에 자체적으로 포함되어 외부 이미지 호스팅에 대한 종속성이 제거됩니다.
  15. README.md에 애니메이션 GIF를 포함할 수 있나요?
  16. 예, 직접 링크, Base64 인코딩 또는 상대 경로 등 설명된 것과 동일한 방법을 사용하여 애니메이션 GIF를 삽입할 수 있습니다.

README.md에 이미지를 삽입하는 것에 대한 최종 생각

GitHub README.md 파일에 이미지를 포함하면 프로젝트의 시각적 매력과 명확성이 향상됩니다. Base64 인코딩, 원시 URL, 상대 경로 등의 방법을 활용하면 외부 호스팅 서비스에 의존하지 않고도 이미지를 효과적으로 포함할 수 있습니다. GitHub Actions로 이 프로세스를 자동화하면 이미지 관리가 더욱 단순화됩니다. 이러한 전략은 작업에 대한 전문적이고 세련된 프레젠테이션을 유지하는 데 도움이 되며 저장소를 더욱 매력적이고 유익하게 만듭니다.