구글드라이브에 업로드된 사진을 HTML에 삽입하는 방법

웹페이지의 프로젝트파일이나 기타 소스파일을 웹에 업로드해놓고 HTML에서 불러와 페이지에 표시되게끔 코드를 작성하는 경우가 많은데요 클라우드 서비스인 구글드라이브에 이미지, 동영상, PDF, 응용프로그램 파일 등을 업로드하고 불러올 수 있다면 파일관리도 편하고 용량이 많은 소스파일도 로컬저장공간을 차지하지 않고 불러와있을 수 있는 장점이 있습니다

일부 웹페이지에서는 구글드라이브의 파일을 업로드한후 링크를 복사하여 img src태그를 사용하여 불러오려고 하면 구글에서 접근을 차단하여 파일을 보호하기 때문에 이미지가 정상적으로 불러와지지 않습니다
즉 업로드한 이미지파일은 구글드라이브에서만 업로드한 이미지를 열어볼 수 있습니다 하지만 HTML페이지에서도 구글드라이브에 업로드한 이미지 파일을 사용할 수 있는 방법이 한 가지 존재합니다

구글드라이브 이미지 img src로 적용할 경우

먼저 구글드라이브로 이동한 뒤에 이미지파일을 하나 업로드하였습니다

업로드한 파일을 우클릭한 뒤 '링크 생성'을 클릭해 주세요

액세스 권한을 링크가 있는 모든 사용자로 변경한 뒤에 하단에 링크복사를 클릭하면 업로드한 이미지파일에 대한 공유링크가 클립보드에 복사됩니다

https://drive.google.com/file/d/1l3Wtzfir6qYS5J_17cXt_c4sYDkSY4GO/view?usp=share_link

이렇게 공유가능한 링크가 생성되며 웹페이지에 주소를 붙여 넣어 이동할 경우 이미지파일이 표시됩니다

업로드한 이미지파일의 공유가능한 링크를 사용하여 HTML에 img src태그를 사용하여 적용해 보겠습니다

웹페이지에서 확인해보면 공유가능한 링크로 img src태그에 적용할 경우 이미지가 정상적으로 출력되지 않는 걸 확인할 수 있습니다

구글드라이브 이미지 HTML에 불러오기

img src를 통해 이미지파일을 적용하기 위해선 이미지의 url id를 가져와야 합니다 즉 공유가능한 링크의 페이지가 아닌 업로드한 이미지의 url id를 적용시켜야 html에 정상적으로 표시됩니다

앞서 생성한 공유가능한 링크에서의 이미지 url id에 해당하는 부분은 빨간색으로 표시된 부분입니다
/d/부터 /view? 전까지 사이에 나와있는 문자열이 이미지 url id라고 생각하면 됩니다 이미지 url id를 복사해 주세요

이제 새로 복사한 이미지 url id를 위의 링크뒤에 빨간색으로 표시된 URLID부분에 붙여 넣어줍니다

728x90

새로 생성된 이미지 표시 url주소입니다

이제 위의 링크를 img src태그에 새로 붙여 넣어본 뒤 웹페이지에서 확인해 보겠습니다

웹페이지에 정상적으로 구글드라이브에 업로드했던 이미지파일이 표시됩니다