인프런 커뮤니티 질문&답변
작성한 질문수
img src부분과 require()에 대해 질문이요!
작성
·
494
0
img태그에 src부분에 변수를 넣어서 사용하는게 목적인데요!
vscode에서
<img src="../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png" />
이런식으로 치면
화면에서 F12눌렀을때 나오는 코드에서는
<img src="img/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.1a7485a1.png">
이런식으로 자동으로 바뀌면서 이미지가 화면에 나오는데요
하지만 주소를 변수(a)에 넣어서
<img :src="a" />
이런식으로 치면
<img src="../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png" />
화면(F12)에서는 변환되지 않고 변수에 넣었던 값이 그대로 나오면서 이미지가 화면에 나오지 않더라고요
require('../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png')
를 하면
img/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.1a7485a1.png
변환되서 화면에 이미지가 나오는 값으로 변경되더라구요
그래서 require()에 주소를 넣은 변수를 넣어서 화면에서 이미지가 나오는 값으로 뽑아내고 싶은데 어떻게 해야 할까요?
require(`${this.sumpath2}`)
를 하니까
"Error: Cannot find module '../../../agent_web_ui/dat/images/1668994704846/arrive_kiupdata1_kiupdata1_20200310172655897_92974574455-20200310_172655_8.png'"
이렇게 나와요!
require()를 안쓰더라도 img src태그에 변수를 넣고 화면에 띄웠을때 변환될 수 있게 하는 방법도 있으면 알려주시면 감사하겠습니다!
아아 수업을 진행하다가 생긴 문제는 아니고요
Vue.js강의도 하셨잖아요? 그것도 들었어가지고
vue로 작업하다가 문제가 생겼는데 혹시 해결방안을 알려주실까해서 질문했어요:)
게시판에서 게시글마다 1개의 이미지가 등록되어 있고 각 게시글의 버튼을 누르면 그에 대응하는 이미지를 새창에 띄우는걸 하고 있었는데요!
상대경로로 <img> src 부분에 넣으면 실제창에 코드에서는 src부분에 들어간게 변환되고 이미지가 출력되더라구요
변환될때 src에서 확장자 바로 앞쪽에 contenthash가 추가되던데...
vue.config.js에서는 [contenthash]로 그 값을 구할 수 있는 거 같던데,
실제 작업하는 곳(예: hello.vue)에서도 contenthash값을 불러올 수 있을까요?<img> src부분에 상대주소를 넣어 컴파일 되면서 주소가 변환되어 이미지를 한번 띄우면 그 변환된 주소를 <img> src부분에 넣어도 이미지가 나오는데요.
상대주소로 한번도 실행안시키고 바로 그 변환될것으로 예상되는 주소를 넣고 띄우면 이미지가 나오지 않더라구요!
이부분도 해결할 수 있을까요?