Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ahungrynoob opened this issue Aug 11, 2018 · 7 comments · Fixed by #78
Closed

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

ahungrynoob opened this issue Aug 11, 2018 · 7 comments · Fixed by #78
Labels

Comments

@ahungrynoob
Copy link
Contributor

  • 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
Copy link
Contributor

njugray commented Aug 11, 2018

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 njugray added the bug label Aug 11, 2018
@njugray
Copy link
Contributor

njugray commented Aug 11, 2018

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
Copy link
Contributor Author

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

@ahungrynoob
Copy link
Contributor Author

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

@njugray
Copy link
Contributor

njugray commented Aug 11, 2018

@DXD23-SJTU bug,会修复的

@fantasyroot
Copy link
Contributor

+1 , 期待修复

@justquanyin
Copy link
Collaborator

justquanyin commented Aug 13, 2018

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

njugray added a commit that referenced this issue Jan 15, 2019
* docs: add issue and pr templates

* fix(webpack): url parse error under proxy #34

* chore(release): publish v1.0.0-beta.2

* fix(beidou-webpack): remove hash name while not using module in css loader, add client alias

* feat(babel-preset-beidou-client): support custom babel browserslist

* fix(cli): init boilerpalte usage info config;
doc: update router, view react, babel-client

* fix(cli): ut(dev and debug) process not killed

* fix(webpack): dump config error
fix: ci broken

* chore(release): publish v1.0.0-beta.3

* fix(webpack): ignore error while not found root file entry

* docs: add 1.0.0 changelog

* docs: README

* chore(release): publish v1.0.0

* chore(eslint): upgrade eslint version

* test: `getInitialProps view middleware`

* fix: initialprops

* add example with-react-loadable (#51)

Example request: #46

* chore(release): publish v1.0.3

* examples: add hot reload patch, fix #45 (#56)

* feat: framework config when running beidou build (#57)

* feat: framework config when running beidou build

* chore(release): publish v1.0.4

* fix: wrong bin file excuted in windows #63 (#65)

* fix: wrong bin file excuted in windows #63

* fix(cli): build file path

* chore(release): publish v1.0.5

* examples: typescript

* chore: script bootstrap

* exmaples: fix config of ts e.g.

* docs: update

* fix: build error when env is not `local` (#70)

* chore(release): publish v1.0.6

* chore: travis env alt 9 -> 10

* fix(webpack): reload `loader.dirs`

* chore(release): publish v1.0.7

* test: skip cli init test case for timeout

* chore: update yarn lock files

* test: skip cli test cases temporarily

* chore: deps for unittest

* fixed typo error (#73)

* fix(webpack): isomorphic webpack set __webpack_public_path__ default value, fix #76 (#78)

* chore(release): publish v1.0.8

* examples: add example react-redux-router-typescript (#89)

* add example react-redux-router-typescript

* chore: npm scripts & license

* fix: public path & router

* 缩进调整

* 调整配置

* Fix error code examples

* fix: rax ut failed as enabled `beautify` option

* chore: docs & lock files

* chore: travis config

* chore: skip rax test for weird `super` problem in travis CI

* fix:缓存逻辑在win下面的bug修复 (#101)

 fix #71

* chore(release): publish v1.0.9

* chore: fix test

* chore: upgrade lerna

* feat: upgrade to babal 7 webpack 4

this is a BREAKING CHANGE

* fix: unittest

* fix: babel config combination

* feat: enable babelrc files by default

* chore: put common deps into root for dev usage

* example: ugrade with-typescript example

* fix(webpack): build option --dev

* chore(webpack): unittest

* chore(react): unittest

* chore: code format

* chore: code prettier

* feat: set node-sass as optional dependency

* feat: completely babel runtime for node (#123)

fix: #122

* feat: support render to stream  (#126)

* feat: support render to stream #124

* examples: stream render

* docs(view-react): add stream render doc

* chore: fix codecov

* feat: upgrade rax view plugin

* fix: loader & rule test

* unittest: fix fixture

* feat: add new package `beidou` reference to `beidou-core`

* chore(release): publish v2.0.0-alpha.0

* fix: A bug exsit in uglifyjs-webpack-plugin after v2.0.1 for  webpack4,use terser-webpack-plugin instead

* feat(webpack): entry loader depth support

fix #48

* fix: remove static config in prod

This config file forced users must provide config.{prod}.js to overwrite default config in framework.

* unittest: webpack entry depth test

* feat(cli): boilerplate tag config

* example:fix pkg.json

* chore(release): publish v2.0.0-alpha.1

* feat(cli): add `--skipInstall` option

* chore: fix ci

* chore: fix build cmd test

* test: ci

* test: dump ci test log

* fix(router): path resolve

* feat: zero config ts support

* example: use less in default

* chore: remove comments & unittest

* fix(cli): fetch tarball with tag

* chore: unittest

* chore: fix CI empty cwd

* feat: auto detect view extension

* unittest: improve test coverage

* example: update

* example: update

* chore(release): publish v2.0.0-beta.0

* chore: upgrade lerna

* chore: version bump

* feat: (unrelease) add beidou plugin for egg framework

* feat: (unrelease)add the README

* Revert "chore: version bump"

This reverts commit 33e0fe2.

* feat: export setGlobal function in beidou-isomorphic

* Revert "Revert "chore: version bump""

This reverts commit 5704709.

Revert "feat: (unrelease)add the README"

This reverts commit d415b8c.

Revert "feat: (unrelease) add beidou plugin for egg framework"

This reverts commit cc54167.

* fix(core): d.ts

* fix(router): config

* fix(cli): framework name reference

* fix(webpack): default resolve exts

* fix(webpack): optimize config of SplitChunksPlugin

* fix(webpack): optimize config of SplitChunksPlugin

* fix(webpack): cache groups enforce option

* fix(router): config for exts

* docs: README
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants