ファイル名がreduxの店舗にあるときに画像パスを指定する方法

Question

こんにちは、私は反応/アプリを作りました。 ）をreduxストアのイメージファイル名で置き換えます。画像をレンダリングするには、私はそれらにパスを提供する必要があります。このコードは今までのところ<img src={require(`../../assets/${avatar}`)} />で動作した唯一のものですが、render関数にrequireステートメントを入れるのは面倒です。また、私はそれをテストする方法を理解できません（how do i get a jest/enzyme test to pass this require statement containing a path and a prop）。私のアプリは現在ルーティングがありませんが、もし私がこの問題を解決するために反応ルータを使うことができたら、私は結局いくつか追加します。関連するコードは次のようになります。モジュール

import React from 'react' 
import PropTypes from 'prop-types' 

const UserProfile = ({name='', avatar=''}) => { 

    return (
     <section className='bg-bright padding-m'> 
      <img alt='avatar' src={require(`../../assets/${avatar}`)} /> 
      {name} 
     </section> 
    ) 

} 

UserProfile.propTypes = { 
    name: PropTypes.string, 
    avatar: PropTypes.string 
} 

export default UserProfile 

それが問題のルックスにラインを

{ 
    "name": "a name", 
    "avatar": "name.jpg" 
    } 

のようなものを使用していますReduxのストアデータが

<img alt="avatar" src="/static/media/admin.34e378b0.jpg"> 

Thxをとしてレンダリング！

Answer 1

レンダリング機能ではもちろん

が必要な文を入れているようだハック、適切なwebpackプラグインが有効になっている、とimage-loaderなどのローダが提供されているために、コードが正しく動作提供。いくつかの相対パスが提供され
は、webpackターゲットdistのビルドですべてのルートディレクトリを含め行い、その後、実行時には、あなたがしたい場合は、単にメディアリゾルバの一部にwebpack-configを再構成https://webpack.js.org/api/module-methods/#require-context
を構築distのからの変数の読み取りとフェッチのリソースを実行します。https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L157