开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第38天，点击查看活动详情

---

写在前面

本篇是react学习的第六篇，介绍如何在react项目中添加图片及设置react标签自动补全

添加图片

下面是一个例子，通过例子直观看一眼就了解怎么在react项目中添加图片了，打开src\App\App.js，将代码改为如下，当时同时需要在App文件夹下添加一个名为arrow.png的图片文件

import './App.css';
import arrow from './arrow.png';

function App() {
  return (
    <div className="App">
      <img src={arrow} alt="arrow" />
    </div>
  );
}

export default App;

这时运行项目，就可以看到图片已经显示在页面上了，所以添加图片很简单，只需要一个import+在img中使用就可以了。在css中使用图片的方法和其他项目一样，例如：

.App {
    background-image: url('./bg.png');
    background-size: 100% 56px;
}

使用svg的两种方式

第一种，像图片那样使用，import之后在img中使用：

import './App.css';
import logo from './logo.svg';

function App() {
  return (
    <div className="App">
      <img src={logo} alt="logo" />
    </div>
  );
}

export default App;

第二种，将icon当成一个react组件

import './App.css';
import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div className="App">
      <Logo />
    </div>
  );
}

export default App;

还可以给<Logo />组件添加样式，比如：<Logo className="logo"/>

设置react标签自动补全

现在我们在项目中写代码时，标签并不会自动补全，这会使我们的开发效率降低，所以接下来在vscode编辑器中设置react标签自动补全

打开设置（文件-首选项-设置或者直接点击左下角的设置图标），搜索emmet.includeLanguages，添加项，填写内容如下：

确定之后回到我们的项目中，标签已经会自动补全了

写在最后

以上就是如何在react项目中添加图片及设置react标签自动补全所有代码和说明