【Ma_gician #03】대체 이미지는 디자이너에게 맡겨

2238 단어 Ma_gician자바스크립트프런트 엔드

오류시 대체 이미지


  • <img> 로 지정한 src 의 이미지가 에러가 되었을 경우, 대체 이미지로 바꾸는 구현이 자주 있습니다. 
    •     <img src="xxxx.jpg">

    브라우저 표준 오류 표시


  • <img src="xxxx.jpg"> 에서 xxxx.jpg 라는 이미지가 없으면 아래와 같이 브라우저 표준 오류 표시가 됩니다.

    • 디자인의 통일성 브라우저 표준 오류 표시는 사이트 디자인의 통일성을 무너뜨린다. 디자인의 통일성을 유지하기 위해 "No Image"를 의미하는 이미지로 바꿉니다. Pure JavaScript 지원 아래의 <script>에서 이미지 로드에 실패했을 때 "No Image" 이미지를 교체해 줍니다. <img id="xxx" src="xxxx.jpg"> <script> 문서 .getElementById('xxx') .addEventListener('error', event=>event.target.src='no-image.gif' ) </script> 이미지 로드 오류시 처리 에러시의 대체 화상을 교환하는 처리는 모두 동일하다. <img> 의 수만큼 같은 코드를 쓴다. 필요한 것은・・・? 대체 이미지 URL 만 !! Ma_gician 구현 <img>에 직접 대체 이미지 URL을 지정합니다. <div><img src="xxx.jpg"></div> <div><img src="xxx.jpg" x-fallback="no-image.gif" _></div> Lightning Talk에서는 여기에서 라이브 코딩합니다. 일괄 지정 모든 이미지에 공통인 "No Image"를 지정하고 싶은 경우는, bo_otstrap.js 파일내에서 지정한 파일이 디폴트로 대체 이미지로서 사용됩니다. <script src="assets/js/bo_otstrap"></script> 좋은 것들 Ma_gician을 사용하면, 대체 화상의 교환 처리는 「대체 화상 URL」을 지정하는 것만이 된다. 디자이너가 HTML을 작성하는 경우, 대체 화상을 지정한 상태로 납품할 수 있다. 대체 이미지 교환과 관련하여 학습 비용은 이론적으로 최소화됩니다. Ma_gician을 만든 사람 이름: Stew Eucen (오유 游漩) 읽는 방법 : 시추 유센 국적: 일본 SNS
  • Twitter: @StewEucen
  • Facebook: Stew Eucen


    • 모집


  • 오픈 소스 활동을 지원할 수 있는 스폰서를 모집합니다.


    • 조용히 감사합니다!

    Vuetify의 하위 구성 요소와 상위 구성 요소 간의 양방향 데이터 전달 이야기
    「그 디자인은 뭐라고?」 조견표

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage