Markdown 파일에 gif를 추가하는 방법이 있습니까?

229

이 GIF 를 GitHub 플레이 버드 마크 다운 파일 에 추가하고 싶습니다 . GitHub에서 수행 할 수없는 경우 다른 버전의 마크 다운에서 수행 할 수 있습니까?

markdown gif github-flavored-markdown

— 자이 나이브 기와
소스

github 저장소의 README에 스크린 샷을 추가하는 방법의 가능한 복제본 ? 또는 github의 README.md에 이미지 추가

— Michael Recachinas

485

gif를 표시하려면 두 가지가 필요합니다

1- 이 예제 에서와 같이이 구문을 사용하십시오.

![Alt Text](https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif)

수율 :

대체 텍스트

2- 이미지 URL은 gif로 끝나야합니다

3- 후손 : 위의 .gif 링크가 잘못되면 이미지가 표시되지 않고 대신 다음과 같이 대체 텍스트 및 URL이 표시됩니다.

대체 텍스트

4- GIF 크기를 조정하려면이 Github 튜토리얼 링크 에서와 같이이 구문을 사용할 수 있습니다

<img src="https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif" width="40" height="40" />

수율 :

— 칼리드 안나 자르
소스

3

진짜 @NikKov !! 이것은 기술적 인 질문입니다.

— Khaled Annajar

6

그 아이는 정말로 고개를 부딪쳤다. 타일 바닥에서 너무 힘들어 뇌 손상이나 심각한 뇌진탕을 입었을 가능성이 높습니다. 사실, 나는 공격적인 것으로 간주하여 그것을 제거하고 더 좋은 것으로 대체 할 것입니다.

— eduncan911

3

GIF가 너무 크면 이미지 상자가 잘못 표시됩니다. 작은 gif는 잘 작동합니다.

— Shubham Chaudhary

1

나는 단지 정확하기 때문 만이 아니라 모두가 고양이를 좋아하기 때문에 답을 올렸다. :)

— MilitelloVinx

2

@Gati 몰라요. 나는 당신이 그것에 대한 새로운 질문을 만들어야한다고 생각합니다.

— Khaled Annajar

102

로부터 마크 다운 쪽지 :

repo에 추가하고 이미지 태그로 참조 할 수 있습니다.

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

인라인 스타일 : 대체 텍스트

참조 스타일 : 대체 텍스트

또는 URL을 직접 사용할 수 있습니다 .

![](http://www.reactiongifs.us/wp-content/uploads/2013/10/nuh_uh_conan_obrien.gif)

— 찢다
소스

@erip Giphy에서 gif를 사용하는 방법?

— AbhimanyuAryan

1

@AbhimanyuAryan 해당 gif를 마우스 오른쪽 버튼으로 클릭하고 주소를 가져 와서 해당 gif의 주소를 찾을 수 있습니다. 예 : media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif

— erip

github의 마크 다운 파일에 연결된 GIF 및 기타 이미지 는 5MB의 파일 제한으로 camo 에 의해 제공됩니다 .

— 0xcaff

11

gif 파일이 있습니다.
GIF 파일을 github 저장소에 푸시하십시오.
github repo에서 해당 파일을 클릭하여 gif의 github 주소를 얻습니다.
README 파일에서 : ![alt-text](link)

아래 예 : ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)

— 위니 판
소스

7

이 같은 REPO 디렉토리에 넣어 쉽게 /img하고 사용![alt text](img/my-image.png)

— 브레이든 최저

7

기피 차차

.gifgiphy의 gif에 문제가있는 경우 위에 나열된 2 가지 요구 사항 ( 이미지 구문으로 끝나고 이미지 구문을 사용해야 함)을 따른 후 :

올바른 giphy URL이 있는지 확인하십시오! 이 끝에 추가 .gif하여 작동 시킬 수는 없습니다 .

브라우저에서 URL을 복사하면 다음과 같은 결과가 나타납니다.

https://giphy.com/gifs/gol-automaton-game-of-life-QfsvYoBSSpfbtFJIVo

대신 "링크 복사"를 클릭 한 다음 "GIF 링크"를 구체적으로 가져와야합니다. 올바른 media.giphy.com것이 아니라 giphy.com다음을 가리 킵니다 .

https://media.giphy.com/media/QfsvYoBSSpfbtFJIVo/giphy.gif

— 요르단 아르네 센
소스

3

.gifGitHub의 기본 폴더에 파일을 업로드 README.md하고이 코드를 사용 하여 편집 하십시오.

![](name-of-giphy.gif)

— 비샬 쉘 레이크
소스

0

위의 모든 답변 외에도

github 저장소 README.md에 gif 를 사용하고 root에서 gif를 사용 하지 않으려면 브라우저의 URL을 복사하는 것만으로는 충분하지 않습니다. 예를 들어 브라우저 URL은 sth입니다.

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif

그러나 github 계정에서 gif를 열고 rihgt를 클릭하고 다음과 copy image address같이 sth를 클릭하십시오 .

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif?raw=true

— 아쉬 칸 나시르 자데
소스

0

로컬에서 업로드 :

Github 리포지토리의 루트에 .gif 파일을 추가하고 변경 사항을 적용하십시오.
README.md로 이동
이거 추가 해봐 ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
커밋과 gif가 보여야합니다.

url을 사용하여 gif를 표시하십시오.

README.md로 이동
이 형식으로 추가 ![Alt text](https://sample/url/name-of-gif-file.gif)
커밋과 gif가 보여야합니다.

도움이 되었기를 바랍니다.

— 서밋
소스