阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    create-react-app 添加图片,字体和文件

    添加图片,字体和文件

    使用 Webpack,添加图片和字体等静态资源的工作方式与 CSS 类似。

    你可以 直接在 JavaScript 模块中 import 文件。 这会告诉 Webpack 将该文件包含在 bundle(包) 中。 与 CSS 导入不同,导入文件会为你提供字符串值。 此值是你可以在代码中引用的最终路径,例如 image 的 src 属性或链接到 PDF 的 href 属性。

    要减少对服务器的请求数,导入小于 10,000 字节的图片将返回 data URI 而不是路径。 这适用于以下文件扩展名:bmpgifjpgjpegpng 。 SVG文件被排除在外。

    例如:

    import React from 'react';
    import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片
    
    console.log(logo); // /logo.84287d09.png
    
    function Header() {
      // 导入结果是图片的 URL 
      return <img src={logo} alt="Logo" />;
    }
    
    export default Header;
    

    这确保了在构建项目时,Webpack 可以正确地将该图片移动到构建文件夹中,并为我们提供正确的路径。

    这也适用于 CSS :

    .Logo {
      background-image: url(./logo.png);
    }
    

    Webpack 在 CSS 中找到所有相关模块引用(它们以 ./ 开头),并用编译后的 bundle(包) 中的最终路径替换它们。

    如果输入拼写错误或意外删除重要文件,你将看到编译错误信息,就像导入不存在的 JavaScript 模块一样。

    编译包中的最终文件名由 Webpack 从内容哈希生成。如果文件内容将来发生变化,Webpack 将在生产中为其指定一个不同的名称,因此你无需担心这些静态资源的长期缓存。

    请注意,这也是 Webpack 的自定义功能。

    React 不需要它,但许多人喜欢它( React Native 使用类似的图片机制)。

    添加 SVG

    注意:此功能适用于 react-scripts@2.0.0 及更高版本。

    上面的部分介绍了添加 SVG 文件的一种方法。

    你还可以直接导入 SVG 作为 React 组件。

    你可以使用这两种方法中的任何一种。

    在你的代码中,它看起来像这样:

    import { ReactComponent as Logo } from './logo.svg';
    const App = () => (
      <div>
        {/* Logo 是一个实际的 React 组件 */}
        <Logo />
      </div>
    );
    

    如果你不想将 SVG 作为单独的文件加载,这很方便。不要忘记导入中的花括号!

    ReactComponent 导入名称是特殊的,它告诉 Create React App 你想要一个渲染 SVG 的 React 组件,而不是它的文件名。

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录