node端无法读取到图片路径为null

[ahungrynoob]

• Node Version:
• Beidou Version:
• Plugin Name And Version:
• React/ReactDOM Versions:
• Platform:
• Mini Showcase Repository:
• Other Info:

Current behavior

同构渲染 node端无法读取到图片路径为null,浏览器端能显示图片路径

'use strict';

import React from 'react';
import { Layout, Menu } from 'antd';
import { BrowserRouter, StaticRouter, Route, Link } from 'react-router-dom';
import util from '../util';
import logo from 'client/assets/xy.png';

const MenuItemGroup = Menu.ItemGroup;
const Router = __CLIENT__ ? BrowserRouter : StaticRouter;
const { Header, Footer, Sider, Content } = Layout;

const configs = util.listComponents();
const components = [];
configs.forEach((config) => {
  config.list.forEach((item) => {
    components.push(item);
  });
});
export default props => (
  <Router {...props}>
    <Layout>
      <Sider className="sider">
        <div className="brand">
          <img
            src={logo}
            alt="antd"
          />
          Ant Design
        </div>
        <Menu theme="dark" mode="inline">
          {configs.map(item => (
            <MenuItemGroup key={item.title} title={item.title}>
              {item.list.map(m => (
                <Menu.Item key={m.name}>
                  <Link className="nav-link" to={`/admin/${m.name}`}>
                    {m.title}
                  </Link>
                </Menu.Item>
              ))}
            </MenuItemGroup>
          ))}
        </Menu>
      </Sider>
      <Layout style={{ marginLeft: 200 }}>
        <Header className="header">
          <h1 className="page-title">AntD Components</h1>
        </Header>
        <Content className="content">
          <div style={{ padding: 23, background: '#fff' }}>
            {components.map((item) => {
              const Comp = item.value;
              return (
                <Route
                  key={item.name}
                  exact
                  path={`/admin/${item.name}`}
                  component={Comp}
                />
              );
            })}
          </div>
        </Content>
        <Footer className="footer">Antd components rendered by beidou</Footer>
      </Layout>
    </Layout>
  </Router>
);

浏览器提示:warning.js:33 Warning: Prop src did not match. Server: "null" Client: "/build/xy-8bb18.png"

Expected behavior

服务端应该也能同构assets.json读到图片路径才对,我看到webpack.local.json中的IsomorphicPlugin已经有了对png图片的支持,但是assets.json里面就是没有图片路径

[njugray]

url-loader的默认配置:

      {
        "test": [
          "/\\.bmp$/",
          "/\\.gif$/",
          "/\\.jpe?g$/",
          "/\\.png$/",
          "/\\.webp$/"
        ],
        "options": {
          "limit": 10000,
          "name": "[name]-[hash:5].[ext]"
        }
      },

文件大小的限制是 10000，超过这个大小会被转换为 url 地址，如果需要将图片转换为 base64格式，尽量使用小图片或者修改大小限制。

对于大图片我们推荐使用cdn，配合 helper.asset() 方法做图片地址的转换。

对于超出限制的图片，在beidou中也应该能将 url 记录到 assets.json 中，这里初步定为是 beidou-webpack/lib/plugin/isomorphic.js 里模块编译的bug

[njugray]

https://github.com/alibaba/beidou/blob/master/packages/beidou-webpack/lib/plugin/isomorphic.js#L127

m._compile(result.content, absolutePath);

url-loader 对于产生路径时，result.content 中内容为：

module.exports = __webpack_public_path__ + "xxx-7ad89.png";

存在动态变量：webpack_public_path，这个值需要注入到 global才能顺利编译。

[ahungrynoob]

嗯嗯，目前只能用helper.asset()hack一下了，谢谢及时回复

[ahungrynoob]

@njugray 那我需要怎么做？这是一个bug还是是我配置不当

[njugray]

@DXD23-SJTU bug，会修复的

[fantasyroot]

+1 ， 期待修复

[justquanyin]

前天已修复。 请更新beidou至最新版
https://github.com/alibaba/beidou/blob/master/CHANGELOG.md#108-2018-08-11