web-dev-qa-db-ja.com

React.jsのimgの正しいパス

私は反応したプロジェクトの画像に問題があります。確かに私はsrc属性への相対パスはファイルアーキテクチャ上に構築されているといつも考えていました

ここに私のファイルアーキテクチャ：

components
    file1.jsx
    file2.jsx
    file3.jsx
conainter
img
js 
...

しかし、私はその道がURL上に構築されていることに気づきました。私のコンポーネントの1つに（たとえばfile1.jsxに）これがあります。

localhost/details/2
<img src="../img/myImage.png" /> -> Works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't works, images are not displayed

どうやってこの問題を解決することができますか？ react-routerによって扱われるどんな形式の経路でも、すべてのイメージが同じパスで表示されることを望みます。

javascriptreactjswebpack
75
onedkr

ファイルシステムではなく、現在のURLからの相対URLを使用しています。絶対URLを使用してこれを解決できます

<img src ="http://localhost:3000/details/img/myImage.png" />

しかし、それはあなたがwww.my-domain.bikeや他のサイトにデプロイするときには不向きです。サイトのルートディレクトリを基準にしたURLを使用することをお勧めします。

<img src="/details/img/myImage.png" />

54
prekolna

質問に答えようとしないでください - create-react-appでは、画像の相対パスは機能しないようです。代わりに、画像を読み込むことができます。

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}
240
claireablani

プロジェクトの作成にcreate-react-appを使用した場合は、パブリックフォルダにアクセスできます。そのため、パブリックフォルダの中にimageフォルダを追加する必要があります。

公開/画像/

<img src="/images/logo.png" />

46
Rubel hasan

create-react-appには public というフォルダがあります（ index.html ...付き）。あなたがそこにあなたの "myImage.png"を置くならば、 img サブフォルダの下で言うなら、あなたはそれらを通してアクセスすることができます：

<img src={window.location.Origin + '/img/myImage.png'} />
35
Dima Gershman

私の場合は、次のコードも機能します。

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
18
Sodhi saab

私は伝統的な相対パスを使用することをお勧めします。下の画像のように使えます。このpublicフォルダには何でも入れることができ、このフォルダをimagesやvideosなどにアクセスすることができます。これのためにあなたのイメージをパブリックフォルダに保管してください。そのようです...

enter image description here

そしてあなたのjsxよりも。

<img src="images/pitbull-mark.png" />
15
Must Keem J

いくつかの古い答えはうまくいきません、他のものは良いですが、要約でテーマを説明しません：

画像が「public」ディレクトリにある場合

例：\public\charts\a.png

JavaScriptの場合：

動的に新しい画像に画像を作成します。

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';

Idを 'img1'として既存のimgを動的に設定します。

document.getElementById('img1').src = 'charts/a.png';

Imageが 'src'ディレクトリにある場合：

例：\src\logo.svg

JavaScriptの場合：

import logo from './logo.svg';  
img1.src = logo;

Jsxの場合：

<img src={logo} />
4
Manohar Reddy Poreddy

公式の使用説明書に従って、 ファイルローダnpm をwebpack.config.jsに追加します。

config.module.rules.Push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

私のために働いた。

3
Treefish Zhang

次のように友人がこれを行う方法を教えてください。

「./」は、画像を要求しているファイル（例えば「example.js」）がフォルダ「images」と同じフォルダツリー構造内のレベルにあるときに機能する。

1
AdamJSim

パブリックフォルダの下にロゴを配置します。 public/img/logo.pngにして、パブリックフォルダを％PUBLIC_URL％として参照します。

<img src="%PUBLIC_URL%/img/logo.png"/>

上記の％PUBLIC_URL％の使用は、ビルド中にpublicフォルダのURLに置き換えられます。 publicフォルダ内のファイルのみがHTMLから参照できます。

"/img/logo.png"や "logo.png"とは異なり、 "％PUBLIC_URL％/ img/logo.png"はクライアントサイドルーティングと非ルートパブリックURLの両方で正しく機能します。 npm run buildを実行して、非ルートパブリックURLを設定する方法を学びます。

0
Sami Start