Как я могу вставить изображение в веб-компонент?

Question

Я пытаюсь вставить изображение в веб-компонент, который создаю с помощью Stencil.

Я получаю 2 ошибки:

AppLogo is declared but its value is never read.

а также

Cannot find module ../assets/logo.svg.

Справочники:

- src
-- components
--- app-header
---- assets
----- logo.svg
---- app-header.tsx
---- app-header.scss
---- app-header.spec.ts

Код:

import { Component } from "@stencil/core";
import AppLogo from "../assets/logo.svg";

@Component({
  tag: "app-header",
  styleUrl: "app-header.scss"
})

export class AppHeader {
  render() {
    return (
      <header class="app-header">
        <a href="#" class="app-logo">
          <img src="{AppLogo}" alt="App Name" />
        </a>
      </header>
    );
  }
}

Там нет тонны документации вокруг этого (что я могу найти). Итак, любая помощь приветствуется.

Answer 1

Довольно много вещей, которые пошли не так здесь.

import AppLogo from "../assets/logo.svg";

Вы не можете просто импортировать файл.svg в Javascript. Что вы ожидаете AppLogo содержать, когда вы импортируете это так? Обычно, когда вы импортируете файл.js,.jsx или.tsx таким образом, где-то в этих файлах есть export указано. Итак, вы знаете, когда вы import из этого файла вы получите все, что экспортировали. Здесь нет export хотя в.svg.

Ваше использование также неправильно:

<header class="app-header">
  <a href="#" class="app-logo">
    <img src="{AppLogo}" alt="App Name" />
  </a>
</header>

Прежде всего избавиться от " вокруг {AppLogo}, Вы хотите использовать значение {AppLogo}- не использовать строку, содержащую {AppLogo}.

Теперь есть два способа достичь того, что вы хотите:

Путь активов

Где-то в корне вашего проекта, есть stencil.config.ts файл. Там вы можете указать задачи копирования. Вы можете прочитать здесь, как это сделать: https://stenciljs.com/docs/config

После того, как вы настроите это правильно и ваш ../assets/ папка копируется в ваш build папку, вы можете просто использовать изображение, указав путь в качестве src:

<header class="app-header">
  <a href="#" class="app-logo">
    <img src="./assets/logo.svg" alt="App Name" />
  </a>
</header>

Свернуть путь

Вы также можете использовать Rollup для импорта. Трафарет использует Rollup в качестве модуля связывания. stencil.config.ts в основном это файл rollup.config. Вы можете найти много документации о накопительном пакете здесь: https://rollupjs.org/guide/en

Есть несколько накопительных плагинов, которые поддерживают импорт файлов.svg:

• Накопительный-плагин-SVG
• Накопительный-плагин-svgo
• Накопительный-плагин-SVG-к-JSX

Если вы используете какой-либо из них, вы сможете import ваши файлы.svg. В зависимости от того, какой плагин вы используете AppLogo будет содержать что-то другое.

Например, rollup-plugin-svg-to-jsx даст вам готовый к использованию JSX-тег при импорте. Итак, после того, как вы

import AppLogo from "../assets/logo.svg";

Вы сможете использовать его как:

<header class="app-header">
  <a href="#" class="app-logo">
    <AppLogo />
  </a>
</header>

Answer 2

Вы можете просто экспортировать константу со значением пути applogo, если она статическая, как показано ниже:

import { Component } from "@stencil/core";
import appLogo from ".";

@Component({
  tag: "app-header",
  styleUrl: "app-header.scss"
})

export class AppHeader {
  render() {
    return (
      <header class="app-header">
        <a href="#" class="app-logo">
          <img src={appLogo} alt="App Name" />
        </a>
      </header>
    );
  }
}

export const appLogo = "../assets/logo.svg";

Также я предлагаю создать отдельный файл для ваших статических констант типа constants.ts и импортировать оттуда логотип файла.