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

Image 触发 onError 后,设置默认 src 不起作用,src已经重新赋值但 dom 中的src并未改变 #8151

Closed
dtdths opened this issue Nov 30, 2020 · 3 comments
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x

Comments

@dtdths
Copy link

dtdths commented Nov 30, 2020

相关平台

H5

浏览器版本: chrome 87
使用框架: React

复现步骤

  1. 封装含有onError的图片组件
const ImgWrap = memo(props => {
  const { src } = props;

  const [currentSrc, setCurrentSrc] = useState(src);

  const handleError = useCallback(() => {
    setCurrentSrc('默认图片.jpg');
  }, [ ]);

  return <Image id={currentSrc}  onError={handleError}  src={currentSrc} />;
});
  1. 调用
<ImgWrap src='错误图片.jpg' />
  1. 实际渲染结果
<taro-image-core id="默认图片.jpg" >
  <img class="taro-img__mode-scaletofill" src="错误图片.jpg">
</taro-image-core>

期望结果

onError 后,可以正常重新设置 src

实际结果

onError 后,重新设置 src 失败,但实际src已经改变(例子中id已经变了)

环境信息


  Taro CLI 3.0.16 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
      npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.16 => 3.0.16 
      @tarojs/components: 3.0.16 => 3.0.16 
      @tarojs/mini-runner: 3.0.16 => 3.0.16 
      @tarojs/react: 3.0.16 => 3.0.16 
      @tarojs/runtime: 3.0.16 => 3.0.16 
      @tarojs/taro: 3.0.16 => 3.0.16 
      @tarojs/webpack-runner: 3.0.16 => 3.0.16 
      babel-preset-taro: 3.0.16 => 3.0.16 
      eslint-config-taro: 3.0.16 => 3.0.16 
      react: ^16.10.0 => 16.14.0 
@taro-bot2 taro-bot2 bot added F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x labels Nov 30, 2020
@darkfiredarkhalo
Copy link

darkfiredarkhalo commented Nov 30, 2020

去掉memo或者useCallback

@dtdths
Copy link
Author

dtdths commented Nov 30, 2020

去掉memo或者useCallback

并没有用

@dtdths
Copy link
Author

dtdths commented Dec 3, 2020

是lazyload的问题,要为false才能动态改变

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x
Projects
Archived in project
Development

No branches or pull requests

2 participants