在Rails 6中提供Webpacker图像

问题描述

我在app/assets/images/letter.png中有一个文件，我正在尝试在React组件中提供该文件。

我希望文件加载器是在这里使用的正确选择。

// loaders/assets.js
const { env,publicPath } = require('../configuration.js')

module.exports = {
  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,use: [{
    loader: 'file-loader',options: {
      publicPath,name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]'
    }
  }]
}

它在我的组件中输出的URL是：

http://localhost:3000/Users/amirsharif/Projects/sendapostcardonline/public/packsmedia/images/letter-599b40cf9aba6c364ac2bfb054d291d7.png

这显然是非常错误的。正确路径（预期）为：

http://localhost:3000/packs/media/images/letter-599b40cf.png

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

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

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false
  extract_css: true

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      "Access-Control-Allow-Origin": "*"
    watch_options:
      ignored: "**/node_modules/**"

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ruby-on-rails webpacker