vue에서 img src는 되는데 img :src 는 왜 안되는 걸까요??

Question

안녕하세요. 캡차 관련해서 페이지에 이미지를 뿌려줘야 하는 상황입니다. spring boot로 구현된 서버에 호출을 하면 캡차 서버에서 키발급 및 이미지를 따오는데요이미지는 boot home/captchaImage/여기.jpg 로 저장하고 있습니다. 이 이미지를 vue단에서 가져다 쓰려고 하는데라고 작성 후 크롬 개발자모드로 확인해보면형식으로 나타납니다.사진도 정상적으로 나오구요. 하지만 이렇게 나옵니다..사진은 엑박이라고 해야할까요? 나오지 않구요.. 캡차다보니 가입 페이지에 진입하거나 새로고침 시에 저 이미지도 변경해주고자 하는건데이미지가 나타나지 않으니까 답답하네요..어떻게 해야 할까요? 아! --- getPic(name) { return require('path'+name+'.jpg') }이런 것도 발견해서 해보았지만 실패했습니다... 도와주세요 ! 감사합니다.

암소프라도뷰 · Answer

base64 이미지로 컨버트 되는건, 빌드시에 웹팩등 번들링 프로그램이 해당소스를 읽어서 대체해주는것이고,빌드후 실행될때 상대경로가 중요한데, 빌드 파일에서도 같은경로에 파일이 있나요??상대경로가아닌 절대경로로 수정하시는면 작동 될 겁니다.

마크쓰리 · Answer

암소프라도뷰vue 빌드 하면 boot home/src/main/resources/static 로 들어가는데 여기에 캡차이미지들이 있어야 한다는 말씀이신가요?절대경로로 하면 not allowed to load local resource 뜨구요

암소프라도뷰 · Answer

로컬 절대경로 말고, 서버 이미지 경로로 설정 하시면됩니다~

마크쓰리 · Answer

암소프라도뷰죄송하지만...이미지 저장경로가 boot home/captchaImage 인데 서버 이미지 경로는 어떻게 알 수 있나요??

이뉴 · Answer

이거 말하는거 같은데요이미지 참조하려면 '&#64;' 를 사용하여 직접 이미지 참조할 수 있습니다. 예 )https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript

마크쓰리 · Answer

암소프라도뷰 니이뉴우삽질하고 있었네요.이미지 경로를 뷰 프로젝트의 static 안에 넣으니 잘 됩니다...감사합니다~!

vue에서 img src는 되는데 img :src 는 왜 안되는 걸까요??

6개의 답변

Q&A 목록