TIL 28 img 태그 src 쓰는법

특정한 경로 안에 있는 src 경로를 쓸때, 인터넷에 있는 url을 쓰는게 아닌 정적파일 static으로 저장하여 쓸때 src에 require를 사용하여야 절대경로? 를 알수있게된다.

Webpack file-loader outputs [object Module]

위에서 보듯이 리액트에서 정적인 파일 경로의 src를 불러올때 require을 쓰는데 이때 리액트 경우는 뒤에 .default를 써서 순수 default src 값을 가져가게된다.  위와 같이 쓴다면 assets 폴더안에 logo.png 경로의 src를 요청한다 라고 해석하면 된다.

그런데 보통 선택한 변수의 아이콘을 가져오는 경우가 있어서 변수를 넣을때는 ${}를 사용하는데 이때는 .default 를 안써도 잘 가져와진다.

하지만 위에처럼 ${} 안에 변수를 사용하거나 하지않고 순수 `` 스트링을 쓸때는 위에처럼 쓴다면 src값이 object module 이라고 뜬다

검사페이지의 elements에서 해당 태그 부분을 보면 src="[object Module]"이라고 뜨는걸 알수있다.

만약 default나 ${}사용하여 변수를 넣어준다면 위와같이 src 값을 가져온다.(이때 절대경로../static/images/asmr/song/ ~~ 로 요청을 했는데 라디오.aa7ae50....라는식으로 상대경로? 로 변경된 경로가 생성되어 가져온다)

이건 마치 import로 해당 파일을 from 에서 불러와서 쓰듯이 require()을 사용하여 해당 위치 경로를 요청하는 거라고 생각된다. import를 쓰지않고 태그안에서 바로 요청하기 위해서 쓰는거 같다.

 

만약 import 를 하거나 require을 사용하여 정적 파일을 경로를 불러오지 않고 인터넷 주소를 쓴다면 import 나 require을 쓰지않고 바로 src=`https://~~~~~` 라는 식으로 넣어주면 된다.