Grails Asset-Pipeline 플러그인을 사용하여 Javascript에서 이미지에 어떻게 액세스합니까?

Question

Grails 2.4로 업그레이드했고 Asset-Pipeline1.8.7 플러그인을 사용하고 있습니다. Javascript에서 이미지에 액세스하는 방법을 궁금합니다. Google Maps Javascript V3 API를 사용 중이며 Javascript에서 일부 마커 아이콘을 설정해야합니다. 태그를 사용하여 GSP에 일부 자바 스크립트를 만들고 내 app.js 코드에서 파일에 액세스하는 방법이 있습니까? 이것이 가능하지 않다면, 자산에서 컴파일 된 이미지를 어떻게 참조 할 수 있습니까?

Answer 1

나는 이상적인 솔루션이 경우에 무엇인지 모르지만 해결책이 될 수 있습니다 당신의 JS 코드에서 '../assets/use-control.png'와 같은

1. 를 사용하여 상대 경로.
2. dom에 img를 추가하고 js 코드에서 참조하십시오.
3. dom의 해당 요소에 data-imgpath="${asset.assetPath(src: 'use-control.png')}" 속성을 추가하고이 링크를 사용하십시오.

Answer 2

예는 GSP에 ${assetPath(src: 'img.png')}을 넣어

Answer 3

당신은 당신의 자산 디렉토리에 루트 경로를 보유하고 전 세계적으로 사용 가능한 객체를 정의하고 축적하기 위해 URL을 자산이를 사용할 수 있습니다. 다음과 같이 다른 곳에서 사용

<g:javascript> 
    window.grailsSupport = { 
     assetsRoot : '${ raw(asset.assetPath(src: '')) }' 
    }; 
</g:javascript> 

그런 다음 레이아웃 헤드 섹션에이 코드를 추가

<g:javascript> 
    var pathToMyImg = window.grailsSupport.assetsRoot + 'images/google_maps_marker.png'; 
</g:javascript> 

업데이트를 2015년 8월 6일

의 릴리스 노트를 확인하면서 asset-pipeline plugin 자산의 비 - 다이제스트 버전이 더 이상 WAR 파일에 저장되지 않는다는 것을 알았습니다. 이것은 나의 제안 된 솔루션을 나누기는 응용 프로그램이 WAR로 배포 할 때 것을 의미하지 않을 것이다 :

2015년 5월 31일 2.2.3 릴리스 - 더 이상 반 오버 헤드를 절단, 전쟁 파일에 비 소화 버전을 저장. 또한 Commons I/O 의존성을 삭제했습니다. 더 빠른 바이트 스트림.

이

명시 적 사전에 모든 이미지를 정의 할 필요가 더 이상 스크립트에서 동적으로 경로를 구성 할 수 있음을 의미합니다 :

<g:javascript> 
    window.grailsSupport = { 
     myImage1 : '${assetPath(src: 'myImage1.jpg')}', 
     myImage2 : '${assetPath(src: 'myImage2.jpg')}' 
    }; 
</g:javascript>  

업데이트 2016년 5월 25일

grails.assets.skipNonDigests (기본값 : false)을 설정하여 저작물의 다이제스트 버전이 내장 된 war 파일에 포함되어있는 경우 구성 할 수 있습니다.

일반적으로 'skipNonDigests'를 해제 할 필요는 없습니다. Tomcat은 자동으로 비 다이제스트 이름으로 파일을 제공하고 manifest.properties 별칭 맵을 통해 storagePath를 사용하여 파일을 복사합니다. 이것은 단순히 스토리지를 절반으로 줄입니다. 그러나 cdn-asset-pipeline 플러그인 외부의 cdn에 업로드하는 것과 'target/assets'의 내용을 통해 업로드하는 것과 같은 일을 시도하는 경우. 이것은 여전히 ​​유용 할 수 있습니다.

브라우저에서 캐싱 문제를 해결하기 위해 제안 된 솔루션을 사용하여 미리 필요한 모든 이미지를 미리 정의 할 수 있습니다 (애셋의 다이제스트 버전은 파일 이름에 content-hash가 있음).

Answer 4

대신 HTML5의 data- * 속성을 사용할 수 있습니다.
여기 좀 더 설명했습니다 : load images from javascript