CI 묻고 답하기

제목 CKEDitor로 업로드한 이미지를 불러오질 못합니다.
카테고리 CI 2, 3
글쓴이 EESYL 작성시각 2019/08/08 16:34:43
댓글 : 6 추천 : 0 스크랩 : 0 조회수 : 15069   RSS

안녕하세요. 이번에 새로 웹개발 배우면서 CI에 입문한 초보 개발자입니다.

제가 웹개발을 배우면서 실습용으로 게시판 형태의 웹사이트를 로컬호스트 환경에서 제작중에 있습니다.

 

현재 제가 구현하려는 것은 글 작성에서 이미지를 첨부하여, 해당 이미지는 서버의 정해진 디렉토리에 저장되고

해당 글을 보여주는 페이지로 가면 글 작성할 때 정한 양식대로 이미지와 글이 보여지는 것입니다.

그렇게 하기 위하여 저는 CKEditor를 사용하여 글 작성 페이지의 입력 폼을 대체하였고, CKEditor가 알아서 이미지 업로드를

처리하도록 코드를 작성하였습니다.

 

그런데 문제는, 이렇게 글 작성을 완료하여 해당 글을 보여주는 페이지로 넘어가면 처음엔 잘 뜹니다.

그러나 다른 페이지를 갔다가 오거나, 새로운 글을 작성하거나 작성 도중 취소하거나, 여하튼 뭔가 다른 작업을 하다 오면

어느 순간부터 첨부된 이미지가 안 보이기 시작합니다.

해당 글만 안 보이는게 아니라 기존에 작성했던 이미지가 첨부된 글 전부가 이미지만 안 보입니다.

나름 CI메뉴얼도 보고 CKEditor 사용법도 봤지만, 제가 아직 초보라 어느 부분이 문제인지 알기가 어려워 이렇게 질문 글을 남깁니다.

 

우선 컨트롤러에 해당하는 Topic 클래스 부분 코드입니다.

1. 글 작성 메소드 add

function add(){
   $this->_head();

   $this->load->library('form_validation');

   if ($this->form_validation->run('topic') == FALSE)//검증 실패
   {
      $this->load->view('add');
   }
   else//검증 성공
   {
      $topic_id = $this->topic_model->put($this->input->post('title'), $this->input->post('description'));
      $this->load->helper('url');
      redirect('/topic/get/'.$topic_id);
   }

   $this->load->view('footer');
}

2. 글 보여주기 메소드 get

function get($id){
   $this->_head();

   $topic = $this->topic_model->get($id);
   $this->load->helper(array('url', 'HTML', 'kor'));
   $this->load->view('get', array('topic'=>$topic));

   $this->load->view('footer');
}

3. 파일 업로드 메소드 upload_receive

function upload_receive(){
   // 사용자가 업로드 한 파일을 /static/user/ 디렉토리에 저장한다.
   $config['upload_path'] = './static/user';
   // git,jpg,png 파일만 업로드를 허용한다.
   $config['allowed_types'] = 'gif|jpg|png';
   // 허용되는 파일의 최대 사이즈
   $config['max_size'] = '1024';
   // 이미지인 경우 허용되는 최대 폭
   $config['max_width']  = '2560';
   // 이미지인 경우 허용되는 최대 높이
   $config['max_height']  = '1440';
   $this->load->library('upload', $config);

   if(!$this->upload->do_upload('upload')){
      echo "<script>alert('업로드에 실패했습니다. ".$this->upload->display_errors()."')</script>";
   }
   else{
      $data = array('upload_data'=>$this->upload->data());

      echo '{
            "fileName": "'.$data['upload_data']['file_name'].'",
            "uploaded": 1,
            "url": "\/static\/user\/'.$data['upload_data']['file_name'].'"
            }';
   }
}

 

그리고 다음은 View에 해당하는 php코드들입니다.

1. topic/add에서 로드하는 add.php(글 작성하는 뷰)

<form action="/index.php/topic/add" method="post" class="span10">
   <?= form_error('title')?>
   <input type="text" name="title" placeholder="제목" class="span12" value="<?=set_value('title')?>">
   <?= form_error('description')?>
   <textarea name="description" placeholder="본문" class="span12" rows="15"><?=set_value('description')?></textarea>
   <div class="form_control">
      <input class="btn" type="submit"/>
   </div>
</form>
<script src="/static/lib/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.addCss( '.cke_editable {font-size: 15px;}' );
    CKEDITOR.replace('description', {
        'filebrowserUploadUrl':'/index.php/topic/upload_receive?command=FileUpload&type=type=Images¤tFolder=/index.php/topic/add'
   });
</script>

2. topic/get에서 로드하는 get.php(글 보여주는 뷰)

<div class="span10">
   <article>
      <h1>
         <?=$topic['title']?>
      </h1>
      <div>
         <div><?=kdate($topic['created'])?></div>
         <?=auto_link($topic['description'])?>
      </div>
   </article>
   <a href="/index.php/topic/add" class="btn">추가</a>
   <a href="/index.php/topic/update/<?=$topic['id']?>" class="btn">수정</a>
   <a href="/index.php/topic/delete/<?=$topic['id']?>" class="btn">삭제</a>
</div>

 

현재 제 CI 버전은 3.1.10이며, CKEditor 버전은 4.12.1, PHP 버전은 7.3.7입니다.

서버는 Apache를 사용하고 있고, Windows 10 환경에서 구축하여 작업중입니다.

 

아무리 찾아봐도 이미지가 잘 뜨다가 갑자기 안 뜨는 이유를 모르겠습니다...

이미지가 보일 때, 안 보일 때 브라우저를 통한 요소 검사에서 이미지 태그 부분의 어떠한 변경사항도 없었습니다.

그래서 소스 검사를 통해서 이미지 파일 부분의 주소를 보니 blob:http://[::1]/~~ 형식으로 뜨고 크기가 0x0으로 나타납니다.

이게 문제인가 싶기도 한데 이에 대한 부분을 어디서 찾아야 하는 지도 모르겠고, 정말 저게 문제인지도 확신을 못하겠습니다.

 

답변 부탁드립니다ㅠㅠ
태그 CKEditor,이미지,blob
 다음글 CI 2.1 환경에서 DB 세션의 user_data가 ... (1)
 이전글 view 호출방법 (3)
목록

댓글

변종원(웅파) / 2019/08/08 16:47:37 / 추천 1

이미지는 어떻게 저장하시고 있죠? 텍스트내에 주소 포함? 아니면 따로 업로드하여 처리? 

텍스트 안에 같이 포함되어 있다면 어느 순간에 에디터가 변조하거나 못 불러오는 걸 수 있습니다.
EESYL / 2019/08/08 17:02:06 / 추천 0

변종원//텍스트 내에 주소를 포함한다는건 잘 모르겠습니다.

일단 서버에 이미지를 업로드하는 것은 add.php에서 fileuploadurl로 지정한 upload_receive 메소드가 처리합니다.

다만 글에 이미지가 들어가는건 CKEditor가 알아서 html태그를 이미지 링크와 함께 삽입합니다.

 
한대승(불의회상) / 2019/08/08 17:03:48 / 추천 1
업로드된 이미지 주소가 어떻게 표시되는지 확인해 보세요.
EESYL / 2019/08/08 17:04:59 / 추천 0
한대승//이미지 주소가 blob:http://[::1]/bac95a44-bfe7-4018-b73f-9a1e55124dbb 이런식으로 나타납니다.
EESYL / 2019/08/08 17:35:08 / 추천 0

요소 검사를 통해서 봤을 땐 이미지가 정상적으로 뜰 때와 아닐 때, 이미지를 띄우는 태그 부분의 코드 차이는 없었습니다.

이미지 url이 변경된 부분도 없고, 해당 태그의 속성값도 바뀐게 없이 태그 전체의 코드가 완벽히 똑같습니다.

그런데 갑자기 어느 순간부터 이미지가 안 뜨게 됩니다. 
EESYL / 2019/08/09 11:35:26 / 추천 0

이것저것 계속 찾아보니 blob url이 서버 내의 파일 경로를 의미하는게 아니고 브라우저 내의 메모리에서 읽어오는 것이라 이런거라네요..

CKEditor에서 본문에 업로드된 이미지 태그를 넣을 때 자동으로 blob url로 넣던데 이 부분을 해결할 방법을 찾아야겠습니다.

답변달아주신 변종원님, 한대승님 감사드립니다.