ajax에서 data-setbg 이미지 안올라가는 이유

ajax를 이용해서 데이터를 불러온 다음 출력할려고 했는데

<div data-setbg="이미지 경로"> 부분에서 이미지 로드가 안되고 계속 하얀 바탕이 나왔다.

그래서 코드를 계속해서 점검을 했는데 코드에는 이상이 없었고,

그렇게 며칠 동안 계속 해답을 못찾다가 구글링을 통해 이유를 찾게 되었다.

 

 

그 이유는 ajax를 사용하면 ajax 코드 안의 js가 실행이 되지 않는데, data-setbg가 js 코드라서 그랬던 것이었다.

 

 

그래서 data-setbg 코드 대신 css 코드를 사용해서 이 문제를 해결했다.

 

<div data-setbg="이미지 경로">

를

<div class="blog-item" style="background-image : url(이미지경로)">

로 변경했다.

주의 : url()안에 이미지 경로를 ''나""로 감싸면 안된다.

 

 

이렇게 했더니 화면에 이미지가 잘 출력됬다.

 

 

 

 

+ background-image 설정(가장 많이 쓰는 것)

background-size : 배경 이미지의 크기와 너비 조정하는 css

 

속성

cover : 배경 이미지 배경에 꽉 채우기

 

 

<div style="background-image : url(이미지경로); background-size : cover;">

이런 식으로 사용하면 배경 이미지가 꽉 채워져 출력된다.