如何添加我自己的 Svg 图像，就像在 Create-React-App 中默认显示的徽标一样

Question

我有一个干净的 create-react-app 安装，我想添加我自己的 svg 图像来显示，与显示徽标的方式相同，即：

import logo from './logo.svg';

{logo}

然而，当我以与导入徽标相同的方式导入自己的 svg 并尝试使用它时，它会在屏幕上打印出这样的 url：

 /static/media/menu.92677579.svg

而不是渲染图像，有人可以帮我解决这个问题吗？

Answer 1

当您编写 {logo} 时，您只是在嵌入一个 URL。如果要显示图像，请像默认模板 does 一样使用 <img> 标签。

<img src={logo} alt="My logo" />

希望对您有所帮助！

Answer 2

我发现我可以传入徽标图像文件 (.svg) 作为组件 "calling ClsSplash" 的道具。调用组件中的导入在 /static/media/logo.5d5d9eef.svg 处发送了对某种优化的 svg 文件的引用我不知道它在哪里或为什么它是必要的.无论如何，我看到了一个引用该道具的动画。

我的 ClsSplash 是您使用

创建新项目时获得的默认值 APP.tsx 的核心

npx create-react-app hello-world --typescript

我设置了另一个 JSX 图像标签以查看如何在 ClsSpash 组件中直接导入 svg 文件。这对我有用运行 (F5) a "project" within VS2019 launched with IISExpress into Google Chrome 75.0.3770.142 (Official Build) (64-bit)

import * as React from 'react';
import * as logo from './../../logo.svg'; 
/* imported item has to have the same name as the file name (without extension) */
/* fyi article explains the optimized svg */
/* https://react.christmas/2018/18 to handle a Data URL */

import '../../fldrAppearance/fldrCSS/App.css'; /* for div classname attributes */


class ClsSplash extends React.Component<any, any> {
    constructor(props: any)
    {
        super(props);
    }

    public componentDidMount()
    {
        // console.log("logoPath is " + logo);
    }

    public render()
    {
        const lclLogo = logo;
        console.log("prop logoPath is " + this.props.svg);

        return (
            <div className="App">
            <header className="App-header">
                    {/*}<img src={logo} className="App-logo" alt="logo" /> {*/}
                    <img src={`${lclLogo}`} className="App-logo" alt="logo" />
                    <img src={`${this.props.svg}`} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.tsx</code> and save to reload.
                    </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                    </a>
            </header >
            </div>
            )
    }

}

export default ClsSplash;

screenshot of two spinning logo svg images

Answer 3

import { ReactComponent as Logo } from './logo.svg';
function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

这是在 React 中导入 SVG 时的一种新的特殊语法。 ReactComponent 导入名称很特殊，它告诉 Create React App 你想要一个呈现 SVG 的 React 组件，而不是它的文件名。您可以在此处阅读更多相关信息，但请记住这是 React 库的特殊语法：

参考link：Create React App

如何添加我自己的 Svg 图像，就像在 Create-React-App 中默认显示的徽标一样

How To Add My Own Svg Image Just Like Logo Is Shown By Default In Create-React-App

reactjs

create-react-app