web-dev-qa-db-fra.com

Comment gérer les images dans une application Rails / Webpacker / React?

J'utilise webpacker avec Rails 5.1.4 pour jouer avec Reactjs, Redux et react-router-dom.

J'ai un composant navbar qui doit afficher des images, mais je ne peux pas accéder aux images dans le dossier assets/images Et ni dans le dossier public.

Je suis ici: app/javascript/src/components/navbar

Mes itinéraires définis dans main.jsx:

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

Voici ce que j'ai essayé:

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

ces 3 tentatives ont réussi une fois, mais cela me donne une 404 (Not Found) parce que lorsque le chemin change, cela fait aussi changer le chemin de mon image. Donc, depuis le chemin racine, j'ai mes images parce que /assets/images/logo.png Existe, mais quand je suis sur /post/:id, Recharger la page ou simplement atterrir ici me donne la suite 404 :

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

Pouvez-vous m'aider? Et plus sur quelle est votre façon de gérer les images de ce type ou les réactions hybrides/Rails app?

Merci

ruby-on-railsreactjswebpackwebpacker
18
adesurirey

Modifiez simplement le fichier config/webpacker.yml et remplacez cette ligne:

resolved_paths: []

avec ceci ceci:

resolved_paths: ['app/assets']

Ensuite, placez l'image dans app/assets/images dossier et chargez-le comme ceci:

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

Vous pouvez même créer un dossier d'images dans vos composants. Chargez-le dans le fichier composant comme ci-dessous-

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 convertit ces chemins d'image en packs.

4
Srikanth V

Pour ceux qui peuvent encore avoir ce problème, essayez ceci:

Mettez votre img dans app/assets/images. Dans cet exemple, mon image s'appelle 'logo.png'.

Dans votre fichier application.html.erb, mettez ceci dans la tête:

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

Maintenant, dans votre composant, rendez l'image:

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

J'espère que cela t'aides.

2
cfarina512

Peut-être que cela aide: https://engineering.klarna.com/migrating-from-Rails-asset-pipeline-to-node-s-webpack-684230e3a93a Jetez un œil à la partie Images.

0
Smek