4

我正在尝试将图像插入到使用 Stencil 构建的 Web 组件中。

我收到 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>
    );
  }
}

没有大量的文档（我可以找到）。因此，任何帮助表示赞赏。

4

1 回答 1

14

这里出了很多问题。

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文件夹后，您可以通过将路径作为 src 来使用图像：

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

汇总方式

您也可以使用汇总来导入它。Stencil 使用 Rollup 作为其模块捆绑器。这stencil.config.ts基本上是一个 rollup.config 文件。你可以在这里找到很多关于汇总的文档：https ://rollupjs.org/guide/en#configuration-files

有一些汇总插件支持导入 .svg 文件：

  • 汇总插件 svg
  • 汇总插件-svgo
  • 汇总插件 svg 到 jsx

如果您使用其中任何一个，您将能够访问import您的 .svg 文件。根据您使用的插件AppLogo将包含不同的内容。

例如 rollup-plugin-svg-to-jsx 将在导入时为您提供现成的 JSX-tag。所以在你这样做之后

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

你可以像这样使用它：

<header class="app-header">
  <a href="#" class="app-logo">
    <AppLogo />
  </a>
</header>
于 2019-02-20T09:36:27.300 回答