web-dev-qa-db-ja.com

Rails / Webpacker / Reactアプリで画像を処理する方法は？

Rails 5.1.4でwebpackerを使用して、Reactjs、Redux、react-router-domで遊んでいます。

画像を表示する必要があるnavbarコンポーネントがありますが、_assets/images_フォルダー内の画像にアクセスできず、publicフォルダー内の画像にもアクセスできません。

私はここにいます：_app/javascript/src/components/navbar_

_main.jsx_で定義された私のルート：

_    <BrowserRouter>
      <div>
        <Alert error={error} />
        <Navbar user={user}/>
        <Switch>
          <Route path="/post/:id" component={PostsShow} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>
    </BrowserRouter>
_

これが私が試したものです：

_<img src="logo.png" alt="Logo" />
<img src="assets/logo.png" alt="Logo" />
<img src="assets/images/logo.png" alt="Logo" />
_

これらの3つの試行は1回成功しましたが、パスが変更されるとイメージパスも変更されるため、404 (Not Found)が得られます。ルートパスから、_/assets/images/logo.png_が存在するので画像を取得しましたが、_/post/:id_にいるとき、ページをリロードするか、ここに着地するだけで、次の_404_が得られます。

_logo.png:1 GET http://localhost:3000/posts/assets/images/logo.png 404 (Not Found)
_

手伝って頂けますか？そして、その種類またはハイブリッドの反応で画像を処理する方法は何ですか/ Rails app？

ありがとう

ruby-on-railsreactjswebpackwebpacker
18
adesurirey

ファイルを編集するだけですconfig/webpacker.ymlとこの行を置き換えます：

resolved_paths: []

これでこれ：

resolved_paths: ['app/assets']

次に、画像をapp/assets/imagesフォルダを作成し、次のようにロードします。

import React from 'react'
import MyImage from 'images/my_image.svg'

const MyComponent = props => <img src={MyImage} />

export default MyComponent
25
Daniel
If we leave resolved_path as [] in webpacker.yml also it works.

Example = 

# Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

コンポーネントに画像フォルダを作成することもできます。以下のようにコンポーネントファイルにロードします-

import React from 'react;
import MyImage from '${imagePath}/example1.png'

export class MyComponent extends React.Component {
  render() {
  return (
  <React.Fragment>
   <img src={MyImage} alt="Image text"/>
  </React.Fragemnt>
  )
 }
}

Webpackerはこれらのイメージパスをパックに変換します。

4
Srikanth V

この問題が引き続き発生する可能性がある場合は、これを試してください：

Imgをapp/assets/imagesに配置します。この例では、私の画像は「logo.png」と呼ばれています。

Application.html.erbファイルで、これを先頭に置きます：

<script type="text/javascript">
   window.logo = "<%= image_url('logo.png') %>"
</script>

次に、コンポーネントで画像をレンダリングします。

return (
  <div>
    <a href="/">
      <img src={window.logo}/>
    </a>
  </div>
);

お役に立てれば。

2
cfarina512

多分これは役立つでしょう： https://engineering.klarna.com/migrating-from-Rails-asset-pipeline-to-node-s-webpack-684230e3a93a 画像の部分を見てください。

0
Smek