Glimmer 기반 테마 컴포넌트의 HTML에서 assets의 이미지를 어떻게 사용하나요?

Include assets (e.g. images, fonts) in themes and components 은 여전히 handlebars 방식을 언급하고 있는 것 같습니다. 제 이해가 맞다면요. 같은 테마 컴포넌트의 HTML(템플릿)에서 사용할 수 있도록, 테마 컴포넌트의 assets 디렉터리에서 이미지를 가져오는 새로운 Glimmer 방식이 이미 사용 가능한가요?

제 사용 사례는 Templating of my "component" broke. How do I fix it?. 에 설명된 이제 더 이상 작동하지 않는 레거시 테마 컴포넌트를 대체하는 것입니다.

내가 시도해 본 것

discourse_theme new discourse-tc-geowebforum-sponsors를 사용하여 새로운 테마 컴포넌트 프로젝트를 생성한 후, 조건부 로직을 제거하고 인라인 템플릿을 사용하여 이전 플러그인을 재현하는 것을 시도했지만, 브라우저 콘솔에 다음과 같은 오류가 발생했습니다:

[THEME 6 'geowebforum-sponsors'] Error: [THEME 6 'geowebforum-sponsors'] Compile error: SyntaxError: /theme-6/discourse/api-initializers/geowebforum-sponsors.gjs: Attempted to resolve a helper in a strict mode template, but that value was not in scope: theme-relative-url: 

또한 다음과 같은 다양한 조합을 시도해 보았습니다:

  • 템플릿을 상수로 분리하기
  • 이중 중괄호 대신 단일 중괄호 사용
  • 중괄호 내에서 함수 호출(themeRelativeUrl("asseco_berit.jpg")) 사용
  • 템플릿을 javascripts/discourse/components/geowebforum-sponsors.gjs로 이동(그리고 이니셜라이저에서 가져오기)
  • 템플릿을 javascripts/components/geowebforum-sponsors.gjs로 이동(그리고 이니셜라이저에서 가져오기)
  • 해당 파일에 class GEOWebforumSponsorsComponent extends Component {}를 도입하고 이니셜라이저에서 이를 가져오기(동시에 LLM이 제안한 대로 같은 파일에서 클래스와 함께 template이라는 이름으로 템플릿을 내보내기 – 이것이 어떤 의미가 있을지 여전히 확신이 서지 않습니다.)

그 결과 다음과 같은 것 중 하나가 발생했습니다:

  • 동일한 오류(다만 다른 파일에서 발생)
    또는
  • klass is not an Ember component
    또는
  • 결과 DOM에 리터럴 템플릿 플레이스홀더가 표시되어, 자연스럽게 이미지 소스에 대한 404 오류가 발생

음, 이 부분을 보셨나요?

테마 컴포넌트 소스 코드 프로젝트의 assets 디렉토리에 파일을 넣는 것도 "업로드"라고 할 수 있을까요?

네. assets/ 디렉토리에 바로 넣으시면 됩니다.

여기서 제공된 힌트와 ask.discourse.com 봇의 도움 덕분에 마침내 작동하게 만들었습니다:

  • discourse_theme CLI가 생성한 내용 위에 추가한 관련 커밋입니다.
  • 첫 번째 게시물에서 언급했던 이전의 실패한 시도와 차이점입니다.

@NateDhaliwal님께 감사드립니다!

이 과정에서 애를 먹었던 주요 사항들:

  • 템플릿에서 이중 중괄호({{ }}) 안에는 임의의 JavaScript 표현식(함수 호출 등)이나 필터 표현식(some-transormation-function someVariableOrLiteral 형태)이 작동하지 않습니다. 해당 위치에 보간할 수 있는 것은 단일 변수뿐입니다.
  • 두 개의 에셋 중 하나에 대해 about.json의 해당 파일 경로 값에 디렉터리 이름 assets/을 포함하는 것을 깜빡했습니다. 이로 인해 조용히 실패하여 해당 설정이 undefined가 되었고, 이는 아마도 전체 템플릿이 조용히 생략되는 등의 원인이 된 것 같습니다.
  • 개발 중 특정 시점에 discourse_theme watch ...로 동기화된 테마 구성 요소가 미리보기에서든 명시적으로 활성화하든 효과가 없었습니다. discourse_theme watch ...가 인스턴스에서 해당 구성 요소의 새 사본을 생성하도록 하고(이전 사본은 삭제) 문제를 해결했습니다. 정확히 무슨 일이 있었는지는 불분명합니다.

브라우저 콘솔을 확인해 보셨나요? 컴포넌트에 오류가 있으면 해당 콘솔에 보고되며, 오류가 존재하면 컴포넌트가 표시되지 않거나(또는 완전히 표시되지 않음)합니다.