ASP.NET Core의 이미지 태그 도우미Image Tag Helper in ASP.NET Core

작성자: Peter KellnerBy Peter Kellner

이미지 태그 도우미는 정적 이미지 파일에 캐시 버스팅 동작을 제공하도록 <img> 태그를 개선합니다.The Image Tag Helper enhances the <img> tag to provide cache-busting behavior for static image files.

캐시 버스팅 문자열은 자산의 URL에 추가된 정적 이미지 파일의 해시를 나타내는 고유한 값입니다.A cache-busting string is a unique value representing the hash of the static image file appended to the asset's URL. 고유한 문자열은 클라이언트(및 일부 프록시)에게 클라이언트의 캐시가 아닌 호스트 웹 서버에서 이미지를 다시 로드할지 묻습니다.The unique string prompts clients (and some proxies) to reload the image from the host web server and not from the client's cache.

이미지 원본(src)은 호스트 웹 서버의 정적 파일입니다.If the image source (src) is a static file on the host web server:

  • 고유한 캐시 버스팅 문자열이 이미지 원본에 쿼리 매개 변수로 추가됩니다.A unique cache-busting string is appended as a query parameter to the image source.
  • 호스트 웹 서버에 위치한 파일이 변경될 경우 갱신된 요청 매개 변수를 포함하는 고유한 요청 URL이 생성됩니다.If the file on the host web server changes, a unique request URL is generated that includes the updated request parameter.

태그 도우미에 대한 개요는 ASP.NET Core의 태그 도우미를 참조하세요.For an overview of Tag Helpers, see ASP.NET Core의 태그 도우미.

이미지 태그 도우미 특성Image Tag Helper Attributes

srcsrc

이미지 태그 도우미를 활성화하려면 <img> 요소에 src 특성이 필요합니다.To activate the Image Tag Helper, the src attribute is required on the <img> element.

이미지 원본(src)은 서버의 물리적 정적 파일을 가리켜야 합니다.The image source (src) must point to a physical static file on the server. src가 원격 URI일 경우 캐시 버스팅 쿼리 문자열 매개 변수가 생성되지 않습니다.If the src is a remote URI, the cache-busting query string parameter isn't generated.

asp-append-versionasp-append-version

asp-append-versionsrc 특성과 true 값이 지정되면 이미지 태그 도우미가 호출됩니다.When asp-append-version is specified with a true value along with a src attribute, the Image Tag Helper is invoked.

다음 예에서는 이미지 태그 도우미를 사용합니다.The following example uses an Image Tag Helper:

<img src="~/images/asplogo.png" asp-append-version="true">

정적 파일이 /wwwroot/images/ 디렉터리에 있을 경우, 생성되는 HTML은 다음과 비슷합니다(해시는 다름).If the static file exists in the directory /wwwroot/images/, the generated HTML is similar to the following (the hash will be different):

<img src="/images/asplogo.png?v=Kl_dqr9NVtnMdsM2MUg4qthUnWZm5T1fCEimBPWDNgM">

매개 변수 v에 할당된 값은 디스크에 존재하는 asplogo.png 파일의 해시 값입니다.The value assigned to the parameter v is the hash value of the asplogo.png file on disk. 웹 서버가 정적 파일에 대한 읽기 액세스 권한을 얻을 수 없으면 렌더링된 태그의 src 특성에 v 매개 변수가 추가되지 않습니다.If the web server is unable to obtain read access to the static file, no v parameter is added to the src attribute in the rendered markup.

해시 캐싱 동작Hash caching behavior

이미지 태그 도우미는 로컬 웹 서버에서 캐시 공급자를 사용해서 해당 파일의 계산된 Sha512 해시를 저장합니다.The Image Tag Helper uses the cache provider on the local web server to store the calculated Sha512 hash of a given file. 파일이 여러 번 요청되면 해시가 다시 계산되지 않습니다.If the file is requested multiple times, the hash isn't recalculated. 캐시는 파일의 Sha512 해시가 계산될 때 파일에 첨부된 파일 감시자에 의해 무효화됩니다.The cache is invalidated by a file watcher that's attached to the file when the file's Sha512 hash is calculated. 디스크에서 파일이 변경되면 새 해시가 계산되고 캐시됩니다.When the file changes on disk, a new hash is calculated and cached.

추가 자료Additional resources