HTML의 이미지 저장 위치를 ​​추상화하려면 어떻게해야합니까?

Question

나는 데이터베이스에 HTML을 저장할 웹 앱을 작성 중이다. 이 HTML에는 이미지를 가리키는 태그가 있습니다. 이미지의 실제 위치를 추상화하여 HTML의 텍스트를 업데이트 할 필요없이 이미지를 교환 할 수있는 방법을 생각하려고합니다.

<p> 
    asdf asdf <img src="img.png" /> asdf asdf 
    asdf asdf <img src="folderXYZ/img.png" /> asdf asdf 
</p> 

가 이상적으로, 여기에 이미지가 어떤 추상적 인 "루트"상대가 될 것이다 : 여기에 내가 무엇을 의미하는지의 예입니다. 내 webapp에서 런타임시 실제 url로 이미지의 SRC 값을 채우고 싶습니다. 예 : http://s3.amazonaws.com/xxxxx/xxxxx/folderXYZ/img.png과 같은 Amazon S3 양식을 제공하고 있거나 내일 변경하면 어쩌면 로컬 서버 http://example.com/resources/folderXYZ/img.png에서 온 것일 수 있습니다.

제가 생각한 한 가지는 정규식을 사용하여 IMG 태그를 추출하고 조작하는 것입니다. 다른 하나는 내 자신의 구문을 구성하고 있습니다 (어쩌면 {{IMAGE /folderXYZ/img.png}}과 같은 것). 이것이 어떻게 기능적으로 다른지는 모르겠지만 이러한 이미지가 반드시 동일한 서버에 상대적이어서는 안되기 때문에 좋은 생각 인 것 같습니다.

나에게 발생 하나 개 다른 아이디어는 내가에서 자원 을 내 웹 애플리케이션의 실제 자원을 조회하고 스트리밍 할 수 있다는 것입니다

그 추상적 인 SRC 위치, 내 웹 애플리케이션 자원에 대한 "프록시"일종의을 (만들기 어디서나 저장 됨). 이것은 유연성의 관점에서 훌륭하게 보인다 (클라이언트는 백엔드 리소스 위치에 따라 다른 URL을 볼 필요가 없다).하지만 내 서버에 추가로드를 가하기 때문에 부분적으로 바람직하지 않다.

그냥 제안을 찾고 있습니다. 감사!

Answer 1

페이지의 모든 항목 (이미지, CSS, 자바 스크립트 등)에이 작업을 수행하려는 경우 요소를 사용할 수 있습니다. 불행히도 링크의 상대 URL에도 적용됩니다.