关于引入图片

来源：3-8 【资源配置】加载媒体与字体文件

weixin_慕丝2377090

2022-07-10

请问老师我看很多人是将图片资源作为 react 组件来引入的，请问这个和课程中的方式有什么优劣？

import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <ReactLogo />
    </div>
  );
}
export default App;

写回答

1回答

阿莱克斯刘

2022-07-15

已采纳

方式 1：

import logo from './logo.svg';

其实就是直接把 svg 文件当作图片来使用，使用这种import方式，我们是不能修改svg颜色的。

方式 2：

import {ReactComponent  as ComLogo} from './logo.svg';

实际上就是渲染了一个 SVG ，自定义的程度会很高。但是请注意，这种方法适用于svg文档导入，不适合图片资源。

同时你的react项目必须满足一下两个条件（我们的课程完全满足）：

1. react-scripts 版本要大于 @2.0.0

2. react 版本大于 @16.3.0

详情请参考 creat-react-app 官方文档：

https://create-react-app.dev/docs/adding-images-fonts-and-files/

weixin_慕丝2377090

非常感谢！

2022-07-18

共1条回复

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

2008 学习 · 1024 问题

查看课程

相似问题

图片无法显示

回答 4

图片加载不出来

回答 1

关于模块引入方式

回答 1

样式使用less是不是就没有提示了

回答 1

图片无法加载

回答 1

打开慕课网App查看更多内容