react js 添加样式_如何在React JS Application中添加图像？-CSDN博客

react js 添加样式

Hello! In this article, we will learn how to add images in React JS? I remember when I just started coding in React JS, I thought adding images would be done exactly as it is in HTML. I later realized that it was different.

你好！在本文中，我们将学习如何在React JS中添加图像？ 我记得当我刚开始在React JS中编码时，我以为添加图像将完全像在HTML中那样进行。后来我意识到这是不同的。

Let's quickly look at its syntax or how it is done?

让我们快速看一下它的语法或如何完成的？

Just like in HTML, having the image in the same folder with the image makes it easy getting the file location URL.

就像在HTML中一样，将图像与图像放在同一文件夹中可轻松获取文件位置URL。

We equally ought to know the extension with our image.

我们同样应该知道我们形象的延伸。

Open your index.js file and type the following as usual,

打开index.js文件，然后像往常一样键入以下内容，

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

From React JS basics, the code above simply imports the required dependencies, components and renders everything to the root node.

从React JS基础开始，以上代码仅导入所需的依赖项，组件并将所有内容呈现到根节点。

import React from "react"
import Img from './congrats.png'

class App extends React.Component {
	render() {
		return (
			<div> 
				<center>
					<img src= {Img} alt="pic" />
					<br/> <b> CONGRATS </b>
				</center>
			</div>
		)
	}
}
export default App

From the code above, we added the image congrats.png using the syntax <img src = {Img} alt="pic" />.

从上面的代码中，我们使用语法<img src = {Img} alt =“ pic” />添加了图像congrats.png 。

We first of all import the image as seen in the second line above.

首先，如上第二行所示，导入图像。

The term Img is not conventional and any name can be used, provided it is equally used the same when writing the image tag.

术语Img不是常规名称，可以使用任何名称，只要在写入图像标签时使用相同的名称即可。

Congrats.png is the name of my image and its an extension is PNG.

Congrats.png是我的图像的名称，其扩展名为PNG。

When writing the tag, we enclose {Img} in curly braces and the tag ends with / > which is a convention in JSX.

编写标记时，我们将{Img}括在花括号中，并且标记以/>结尾，这是JSX中的约定。

Also note that, all react JS image tags must have an alternate (alt).

另请注意， 所有react JS图像标签都必须具有备用 ( alt )。