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

本文介绍: react的开发中关于图片的知识1.react中使用图片2.在jsx文件中使用图片3.在css 文件中使用图片4.图片的路径讲解 ./含义 /含义 @含义5.使用图片的案例6.react中使用图片方式和html的区别

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

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

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 语句引入的。这种方式可以让我们在开发中更方便地管理图片。

在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 语句引入的。
显示结果
在这里插入图片描述

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

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

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>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;