[멋쟁이 사자처럼 5기] rails 프로젝트에 이미지 삽입하기

rails 프로젝트에 이미지 삽입하기

ruby on rails로 과제를 하거나 스스로의 프로젝트를 진행할 때

이미지를 집어넣는 작업을 많이 할 텐데 잘 안되는 분들이 있었을 것 같아서 몇 가지 방법에 대해 설명하겠습니다.

---

1. public 이용하기

가장 기본적인 방법입니다. 

제일 먼저 집어넣고 싶은 사진을 rails project의 public 폴더에 집어넣습니다.

rails에서 public은 외부에서 직접 참조할 수 있다고 합니다. (여기 참고해주세요)

그냥 public폴더 내부에 있는 것들은 아무 제약 없이 사용 가능하다라고 생각하면 됩니다.

이제 이미지를 적용해보겠습니다.

코드는 적용하고 싶은 html파일에

<img src="/lion_dongguk.png"></img>

추가해주면 됩니다.

이렇게 참조하게 됩니다.
사진에 문제가 있습니다. 꼭 이렇게 추가해주세요!!

<img src="/lion_dongguk.png"></img>
 

그리고 성공적으로 이미지가 적용이 된 것을 확인할 수 있습니다.

---

2. asset/image 이용하기

public 말고 다른 곳에서도 이미지를 불러올 수 있습니다.

대표적으로 app/asset/image 부분인데 여기를 참조하는 법을 설명하겠습니다.

먼저 마찬가지로 이미지를 app/assets/images에 집어넣습니다.

이제 html에 적용하는 코드 부분인데 아까와는 달라집니다.

<img src="<%=asset_path 'lion_dongguk.png'%>"></img>

img src=안에 <%=asset_path 'lion_dongguk.png'%>가 추가 되었는데

이는 루비 명령어 중에 하나인 asset_path를 실행하겠다는 뜻이고

asset_path는 assets폴더 안에 있는 것들의 주소를 출력해주는 명령어입니다.

그냥 쉽게 설명하자면 assets폴더 안에 있는 lion_dongguk.png가 숨겨져 있는데

이 주소를 가져오겠다!!라고 생각하면 됩니다.

이렇게 결과 값을 개발자 도구로 찍어보면 차이점을 알 수 있는데

주소가 다르다는게 보입니다.

---

추가 사항 1입니다. assets/images에 집어넣고도 루비 문법을 사용 안 하고 직접 참조할 수 있습니다.

<img src="/assets/lion_dongguk.png"></img>

이런 방식으로 /assets/....식으로 중간에 images경로를 쓰지 않고 연결하면 가능합니다!!( 5기 분 코드 보고 발견했습니다.ㅎㅎ)

---

추가사항 2입니다. 다른 루비 문법인데 알아두시면 좋아요!

<%= image_tag "lion_dongguk.png" %>

---

이렇게 두 가지 rails에서 이미지를 삽입하는 방법을 알아봤는데

사실 더 많은 방법들이 있습니다...만 일단 이 정도만 알고 있어도 코딩하는데 문제없습니다.

저도 이 두 가지를 주로 사용합니다. 

일단 루비 문법이 아직 익숙하지 않다..거나 2번 방법이 이해가 안간다...라고 생각하는 분들은

1번 public 사용하기를 사용하는 것을 추천드립니다!!

궁금하신 점 있으시면 댓글 남겨주세요!!