Axios를 사용하여 API 호출에서 동적 값을 수신할 때 잘못된 경로로 인해 Vue js 이미지 v-bind src가 작동하지 않습니다.

Question

이미지를 표시하는 데 문제가 있습니다. SQL 데이터베이스에서 해당 경로를 가져온 다음 내 웹 사이트 프로젝트에 표시하고 싶습니다. 이것이 제가 작동시키려고 노력한 방법입니다:

으아악

에 testItem.pictureLink 我有这个字符串 "@/assets/b1q2v1.png"

이미지의 경로가 바뀌기 때문에 작동하지 않습니다. 개발자 옵션의 네트워크 탭에서 요청 URL을

로 변경하세요.

localhost:8080/courses/tests/@/assets/b1q2v1.png

그런 다음 v-bind 없이 수동으로 문자열을 입력하는 경우:

으아악

표시된 이미지의 요청 URL은

입니다.

localhost:8080/img/b1q2v1.2aa65ed1.png

비슷한 해결책을 시도해봤습니다

으아악

하지만 작동하지 않습니다. 오류는 다음과 같습니다.

오류: "@/assets/b1q2v1.png" 모듈을 찾을 수 없습니다

동적 이미지 경로에 src 속성을 올바르게 바인딩하는 방법은 무엇입니까?

Answer 1

pictureLink 이름을

로 변경할 수 있습니다. 으아악

그런 다음 이미지를 가져오는 방법을 만듭니다.

으아악

템플릿에서 메서드를 호출합니다.

으아악