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>標籤中。