Javascirpt img태그 인식이 안되요??
좌측은 브라우저, 우측은 코드창입니다.
보시다 싶히, h1, h2태그 등은 정상적으로 동작하는데, Img태그는 src가 잘못된것같아서 이리고치고 저리고쳐봐도 다 안됩니다.
분명 images폴더에 있는 LionKing.jpeg라는 파일을 불러오려하는데,
왜 안되는걸까요?
``여기 안에다가 img태그는 쓰면안되는건가요?
초보자입니다.
알기쉽게 설명해주세요.
코드 내용과 질문 내용만 봐도 뭘로 공부하시는지 알 것 같군요.
그냥 지나치려다가 저도 같은 문제로 안된적이 있어서 한참 고민했던 적이 있어서 답변 드립니다.
강의를 따라하면 되는데, 꼭 따로 혼자 해보려고 하니 안되더라구요...
우선 저기서 src 를 뭘로 고쳐도 되지를 않습니다. 저도 정말 몇시간을 구글링을 찾아서 해봤는데 뭘 바꿔도 잘 안됩니다.
그래서 찾은 방법이 있는데, 혹시 express 강의도 들으셨나요?
express 강의를 들으면 이미지를 내 서버에 띄워놓고 그걸 가져와서 사용하는 방법이 있습니다.
그렇게 되면 저기서 src 가 파일 경로가 오는 것이 아닌 내 서버에 띄워져 있는 이미지 url 경로가 됩니다.
만약 잘 이해가 되지 않으신다면, express image upload 로 구글링을 해서 검색해보시다보면 여러 가지 글이 많이 있습니다.
혹은 express 홈페이지를 참고해보세요
https://expressjs.com/ko/starter/static-files.html
분명 nodejs 만 가지고 하는 방법이 있을 것 같은데 저도 아무리 찾아도 안보이길래,
대신 발견한 게 express 를 사용하면 쉽게 이미지를 띄울 수 있다는 것이었습니다.
질문하신걸 정확히 해결해드리지는 못했지만 혹시 express 를 사용할 줄 아신다면 express 로 하는 것이 편리하실 것이라고 답변 남겨드립니다.
해당 웹서버에 /image/LionKing.jpeg 라는부분의 라우팅(주소 접속)을 대응해줄 소스가 없습니다.
nodejs의 http 내장 모듈을 이용하여 createServer로 생성할 경우 일일히 접속경로에 파일이 존재하는지 대응해주어야 합니다.
Express를 이용하여 서버를 구축하신뒤, Express.static 설정을 통하여 static 폴더를 지정하시면 크게 설정하실게 없으실겁니다.
안녕하세요 img 태그안에 src로 이미지 링크는 줄 수 있습니다.
링크 주소가 잘못되어있네요 이미지가 들어있는 폴더는 images인데
src안에 경로는 image 로 쓰셨네요 고쳐보세요
수정전 :<img src="/image/LionKing.jpeg" />
수정 후 : <img src="/images/LionKing.jpeg" />
안녕하세요.
해당 이미지를 불러오지 못하는 이유는 가장 흔하게 실수할 수 있는 오타인 것 같네요
폴더명은 현재 보면 images 라고 되어 있는데 코드상에는 image 로 되어 있습니다.
<img src="/images/LionKing.jpeg"> 로 수정하시면 잘 불러와질 것 같아보입니다.
흔하게 실수할 수 있는 오타가 가장 찾기 힘든 법이죠 ^^
안녕하세요.
img tag를 사용하셔도 됩니다. images앞에 "/"표시를 빼고 처리하시면 될 거 같습니다.
HTML에서의 path는 아래를 참고하세요.
https://www.w3schools.com/html/html_filepaths.asp
그런데 좀 이상한 것은 이미지 경로가 안 맞으면 액박이 뜨던가 혹은 ALT tag의 IMAGES라는 내용이 보여야 할 텐데요, 해당 내용이 없는것이 좀 이상하기는 합니다.
위에 테스트 하시는 로컬 접속 방법이 localhost:8080 이라면 localhost:8080/images/LionKing.jpeg 를 우선 해보시는 것도 좋겠습니다.
* 혹시 잘 안되어서 재 질문 주실때는 첫번채 캡쳐를 큰 것으로 해서 부탁 드립니다. 내용이 잘 안보여서요..
폴더명하고 경로명이 잘못 되어 있습니다. image -> images 로 바꿔주시고 하면 잘 작동할것 같네요. 뿐만아니라 jpeg 보다는 png나 jpg가 더 좋으며 최신 형식의 코딩으로 하고싶으시다면 webp 파일 형식도 한 번 고려해보세요. 구글에서 권장하는 이미지 저장 방식이라 적용하시면 더 좋을 것입니다.
/image/LionKing.jpeg 라고 경로를 쓰셨는데, 디렉토리 이름을 보았을 때 뒤에 s를 누락하신 것 같습니다.
또한 상대 경로로 불러올 때에는 앞에 /를 붙이면 root 아래의 디렉토리로 판단하기 때문에 /를 빼고 쓰셔야 합니다.
<img src =“images/LionKing.jpeg” alt=“IMAGES” / >
안녕하세요
일단 브라우저상의 소스는 제대로 보이는걸로 확인이 되는데요
혹시 브라우저상에서 주소창에 아래처럼
http://localhost:3000/image/LionKing.jpeg <== 이렇게 입력하여 엔터를 눌렀을때 이미지가 제대로 보이시나요?
만일 제대로 된 이미지가 안보인다면, 해당 위치에 이미지파일이 없어서 그럴수 있구요
만일 제대로 보인다면?
/image/LionKing.jpeg <== 이 부분을
http://localhost:3000/image/LionKing.jpeg <== 이렇게 수정하여 다시 실행해보세요
아마 잘 될거라 예상합니다^^
