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

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

0 голосов
/ 19 февраля 2019

Я пытаюсь вставить изображение в веб-компонент, который создаю с помощью 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>
    );
  }
}

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

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Вы можете просто экспортировать константу со значением пути 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 и импортируйте оттуда логотип файла.

0 голосов
/ 20 февраля 2019

Здесь некоторые вещи пошли не так. 

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

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

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

<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#copy

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

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

Путь свертки

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

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

  • rollup-plugin-svg
  • rollup-plugin-svgo
  • rollup-plugin-svg-to-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>
...