為什麼我無法在 React 應用程式中載入本機圖像？-js教程-PHP中文網

為什麼我無法在 React 應用程式中載入本機圖像？

Susan Sarandon

發布： 2024-11-16 19:20:03

原創

818 人瀏覽過

Why Can't I Load Local Images in My React App?

本地映像未在React 應用程式中載入

背景：

本地映像有時無法在React 應用程式中加載，儘管外部圖像渲染成功。這可能是一個令人沮喪的問題，特別是對於依賴本機影像進行設計和功能的開發人員而言。

故障排除：

問題通常在於影像的來源方式在反應應用程式中。原因如下：

Webpack 整合： 在 React 專案中使用 Webpack 時，需要明確要求影像，然後 Webpack 才能處理和替換其來源路徑。
檔案路徑問題：僅在 src 屬性中提供影像的相對或絕對檔案路徑是行不通的。

解決方案：

要解決此問題，請使用 require() 函數匯入本機映像。以下是範例：

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="home-container">
                <div className="home-content">
                    <div className="home-text">
                        <h1>foo</h1>
                    </div>
                    <div className="home-arrow">
                        <p className="arrow-text">
                            Vzdělání
                        </p>
                        <img src={require('/images/resto.png')} />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

登入後複製

透過使用 require('/images/resto.png')，您可以指示 Webpack 處理映像並相應地替換來源路徑。這可確保圖像正確載入並顯示在應用程式中。

以上是為什麼我無法在 React 應用程式中載入本機圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！