rails的反应webpack无法加载图片

时间:2018-01-31 10:28:14

标签: javascript ruby-on-rails reactjs webpack

我使用命令如下所示创建一个新应用程序(使用react webpack

我使用了导轨5.1.4

rails new news --database=postgresql --webpack=react

我将一些图片放入app/assets/images,因此在文件夹app/javascript/src/components/test.jsx中,我想显示放在images中的assets/images

import React, { Component } from 'react'
import addBanner from 'images/addbanner_728x90_V1.jpg';

class Header extends Component {
  render() {
    return (
      <header id="header">
        <img src={addBanner} alt="" />
      </header>
    )
  }
}

这是我的webpacker.yml

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']

当我运行rails server时,图片没有显示在我的网站上。

这是debug console chrome上显示的错误。

GET http://localhost:3000/packs/_/assets/images/addbanner_728x90_V1-b8833c72a88a27dde49f4c9067bef50d.jpg net::ERR_BLOCKED_BY_CLIENT

如何显示此图像?

1 个答案:

答案 0 :(得分:1)

最有可能的原因是名称为addbanner_...jpg,其被广告拦截,因为它认为这是广告。尝试停用adblock,或更改图片名称。