React中引入图片的多个方面详解

一、React引入图片资源

在React中，我们可以使用HTML <img>标签来加载静态图片资源。在React中，我们可以使用 import 或者 require 来导入静态资源，以将其加载到项目中。下面是示例代码：

{`import React from 'react';
import logo from './logo.png';

function App() {
  return (
    <div className="App">
      <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>
    </div>
  );
}

export default App;`}

在上述代码中，我们使用 import 导入了一个样式图片 logo.png，并在<img>标签中使用它。

二、React引入SVG图片

SVG图像是一种矢量图像格式，可以缩放并始终保持清晰度。在React中，我们可以直接使用SVG图像，并在其上添加CSS样式。一个示例代码如下：

{`import React from 'react';
import logo from './logo.svg';

function App() {
  return (
    <div className="App">
      <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>
    </div>
  );
}

export default App;`}

在这个示例代码中，与引入普通静态图片相比，我们多引入了一个后缀为 .svg 的SVG图片，并与普通静态图片一同使用。

三、React引入图片打包路径不对

在React中，一个非常常见的错误是，因为引用图片的路径不对，导致无法正常加载图片。这个问题的根本在于React app启动时，可能并没有配置正确的工作目录，并且图片资源很可能被放缩到了正确的文件夹内。

解决这个问题的方法非常简单，只需要把图片的根路径设为public/即可。下面是一个示例代码，它展示了如何解决koa的此类问题:

{`import React from 'react';
import logo from '../public/logo.png'; 

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

export default App;`}

在这个示例代码中，Image组件通过路径 '../public/logo.png' 导入了一个logo图片，保证了路径的正确性。

四、React引入组件

在React中，我们有时需要加载组件的图片资源，而这个组件的图片不可能和其他资源放在同一个文件夹下，因此我们需要使用import或者require方法来导入组件。下面是一个例子代码:

{`import React from 'react';
import TestComponent from './test-component';
import TestImageSrc from './img/test-image.jpg';

const Test = () => (
    <TestComponent image={TestImageSrc} />
)

export default Test;`}

在这个例子代码中，我们使用import导入了组件TestComponent ，并且通过路径'./img/test-image.jpg' 导入了一个图片资源TestImageSrc，最后将这个资源作为image属性传递给了TestComponent。

五、React怎么引入图片

在React中，我们可以使用import或者require等方法引入图片资源。下面是一个使用require的示例代码：

{`import React from 'react';
import myImage from './my-image.png';

const MyImage = () => (
    <img src={require('./my-image.png')} alt="My image" />
)

export default MyImage;`}

在这个示例代码中，我们使用require方法加载了一个my-image.png图片资源，并将其渲染到界面上。

六、React require引入图片

在React中，如果需要引入一组图片，那么通过require.context() 方法导入整个文件夹是非常方便的。下面是一个使用require.context()方法的示例代码 ：

{`const images = {};
const imageContext = require.context('../assets/art/', true, /^\.\/.*\.(png|jpg|gif)$/);
imageContext.keys().forEach((image) => {
    images[image.replace('./', '')] = imageContext(image);
});

const Image = ({ name }) => {
    const imgSrc = images[name];

    return (
        <img src={imgSrc} alt={name} />
    );
};

export default Image;`}

在这个示例代码中，我们使用require.context()方法从文件夹读入所有以.png，.jpg，.gif结尾的文件，并将其保存在一个images对象中。 然后我们创建了一个名为Image的组件，并根据name属性，渲染目标图片到界面上。

七、React引入antd

在React中，如果需要使用Ant Design UI组件库，我们需要先引用它的CSS文件，并且在<img>标签中直接使用myImage图片资源即可。下面是示例代码：

{`import React from 'react';
import 'antd/dist/antd.css'; // 引入antd css文件
import myImage from './my-image.png';

const MyImage = () => (
    <div>
        <img src={myImage} alt="My image" />
        <Button type="primary">Primary Button</Button>
    </div>
)

export default MyImage;`}

在这个示例代码中，我们引入了Ant Design UI组件库的CSS文件，并且在<img>标签中直接使用了myImage图片资源。同时，我们也引入了一个Button按钮组件，以展示Ant Design UI组件库的实际使用情况。

八、React引入字体

在React中，我们可以使用@font-face来引入字体，并且将其应用到特定的CSS字符处。下面是一个引入字体的例子：

{`import React from 'react';
import myFont from './my-font.ttf';

const styles = {
  fontFamily: 'myFont',
  src: \`url(\${myFont})\`,
};

const MyText = () => (
    <p style={styles}>My text with custom Font</p>
);

export default MyText;`}

在这个示例代码中，我们使用@font-face引入了一个名为myFont的字体，并且将其应用于<p>标签中的文字。

九、React导入图片

在React中，我们可以使用@import导入图片。下面是一个导入单张图片的例子代码：

{`import React from 'react';
import '../styles/image.css';

const styles = {
  backgroundImage: 'url("./image.jpg")',
  height: '300px',
  backgroundSize: 'cover',
  backgroundPosition: 'center center',
};

const Image = () => (
    <div style={styles}></div>
);

export default Image;`}

在这个示例代码中，我们使用@import导入了一个名为image.jpg的图片，并将其作为背景图片应用到<div>标签中。