Skip to content

개발자 매뉴얼 | 이미지 alt 설정

Jump to bottom
Seunggyu Lee edited this page Nov 13, 2022 · 4 revisions

alt 태그 생성 ml

// mobilenet ml을 불러와서 사용
const ml = async (img) =>{
    model = await mobilenet.load();
    const predictions = await model.classify(img);
    // console.log(predictions[0].className)
    return predictions[0].className;
}
// 화면이 렌더링되면 해당 페이지에서 alt 태그가 달려있지 않은 이미지들을 탐색
// 해당 이미지 태그의 alt를 달아주고 모든 작업이 완료 시 문서 html text를 스테이트 값으로 저장
// React를 활용해 state가 변경된 부분만 재렌더링이 일어납니다. 이로 인해 jquery 등의 다른 프레임워크보다 성능적으로 우수합니다.

    useEffect(()=>{
        page_ref.current.innerHTML = props.body;

        const page= page_ref.current;
        const imgs = page.querySelectorAll('img');

        if(imgs.length !== 0){
            const promiseList = Array.from(imgs).map(async (element)=>{
                // console.log(element);
                if(!element.hasAttribute('alt')||element.alt === ""){
                    element.setAttribute('crossorigin','anonymous');
                    return ml(element).then((alt) => {
                        element.alt = alt;
                    })
                }
            });

            Promise.all(promiseList)
            .then(()=>{
                // page.innerHTML에는 head 태그가 같이 달려있지 않아 생기는 버그를 고치기 위해 <head></head>를 앞에 붙여줌
                // 정확한 이유 : 벡엔드에서 스타일을 주입할 때 head 태그를 기준으로 문자열 탐색을 하기 때문
                props.render("<head></head>" + page.innerHTML);
            })

        }
    })
Clone this wiki locally