Как обрабатывать изображения в приложении Rails/Webpacker/React?

Я использую webpacker с rails 5.1.4, чтобы играть с Reactjs, Redux и response-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 попытки были успешны один раз, но потом это дает мне 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)

Ты можешь мне помочь? И более того, как вы обрабатываете изображения в таком виде или в гибридном приложении ReactionJS/Rails?

Спасибо

Ответы

Ответ 1

Просто отредактируйте файл 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

Ответ 2

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

Вы даже можете создать папку изображений в ваших компонентах. Загрузите его в файл компонента, например, below-

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 преобразует эти пути изображений в пакеты.

Ответ 3

Если у вас все еще есть проблема, попробуйте:

Поместите ваш 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>
);

Надеюсь, это поможет.