react的开发中关于图片的知识

React是一个流行的JavaScript库，用于构建用户界面。在React开发中，图片是一个非常重要的元素，可以用于美化界面和展示内容。本篇博客将详细讲解React中关于图片的知识。

1. React中使用图片

在React中使用图片非常简单，只需要使用img标签即可。例如：

import React from 'react';
import logo from './logo.png';function App() {return (<div><img src={logo} alt="Logo" /></div>);
}export default App;

在上面的例子中，我们使用了img标签来展示图片。需要注意的是，我们使用了一个变量logo来引入图片，这个变量是通过import语句引入的。这种方式可以让我们在开发中更方便地管理图片。

2. 在JSX文件中使用图片

在JSX文件中使用图片也非常简单，只需要像在HTML中一样使用img标签即可。例如：

import React from 'react';
import logo from './logo.png';function App() {return (<div><h1>Welcome to My Website</h1><img src={logo} alt="Logo" /></div>);
}export default App;

在上面的例子中，我们在JSX文件中使用了img标签来展示图片。需要注意的是，我们使用了变量logo来引入图片，这个变量是通过import语句引入的。
显示结果

3. 在CSS文件中使用图片

在CSS文件中使用图片也非常简单，只需要使用url()函数即可。例如：

.logo {background-image: url('./logo.png');
}
.n-pglg {background: url('../../static/images/mymusic.png') no-repeat;
}
从当前出发 找到图片

在上面的例子中，我们使用了url()函数来引入图片。需要注意的是，路径是相对于CSS文件的路径。

4. 图片的路径讲解

在React中，有三种常见的路径表示方法：相对路径、绝对路径和别名路径。

• 相对路径：以.或…开头的路径表示相对当前文件的路径。例如：./logo.png表示当前文件夹下的logo.png文件。
• 绝对路径：以/开头的路径表示相对于项目根目录的路径。例如：/src/logo.png表示项目根目录下的src文件夹中的logo.png文件。
• 别名路径：使用@或~表示别名，可以在webpack配置文件中进行配置。例如：@/assets/logo.png表示项目根目录下的src文件夹中的assets文件夹中的logo.png文件。

5. 使用图片的案例

下面是一个使用图片的案例，展示了如何在React中使用图片：

import React from 'react';
import logo from './logo.png';
import './App.css';function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

在上面的例子中，我们使用了img标签来展示图片，使用了import语句来引入图片。

6. React中使用图片方式和HTML的区别

在React中，使用图片的方式和HTML的方式非常相似。但是，有一些区别需要注意：

• 在React中，需要使用import语句来引入图片。
• 在React中，需要使用{}来包裹变量名，表示这是一个JavaScript表达式。
• 在React中，需要使用className来代替HTML中的class属性。

总之，在React中使用图片非常简单，只需要掌握好上面的知识点即可。