Taro3, html解析图片mode默认使用scaleToFill，应该为widthFix

[hulin32]

相关平台

微信小程序

复现仓库

https://github.com/flyingalex/taro-v3-bug-demo/blob/master/src/pages/index/index.jsx
小程序基础库: 2.11.3
使用框架: React

复现步骤

https://github.com/flyingalex/taro-v3-bug-demo/blob/master/src/pages/index/index.jsx

期望结果

图片不被压缩

实际结果

图片被压缩

环境信息

👽 Taro v3.0.7


  Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 10.14.4
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.11.3 - ~/.nvm/versions/node/v10.17.0/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.7 => 3.0.7 
      @tarojs/components: 3.0.7 => 3.0.7 
      @tarojs/mini-runner: ^3.0.7 => 3.0.7 
      @tarojs/react: 3.0.7 => 3.0.7 
      @tarojs/router: 3.0.7 => 3.0.7 
      @tarojs/runtime: 3.0.7 => 3.0.7 
      @tarojs/taro: 3.0.7 => 3.0.7 
      @tarojs/webpack-runner: 3.0.7 => 3.0.7 
      babel-preset-taro: ^3.0.7 => 3.0.7 
      eslint-config-taro: 3.0.7 => 3.0.7 
      react: ^16.13.1 => 16.13.1 

[iamxiyang]

   Taro.options.html.transformElement = (el) => {
      if (el.nodeName === 'image') {
        el.setAttribute('mode', 'widthFix')
      }
      return el
    };

我觉得你的问题可以通过Taro提供的这个方法进行解决。

[hulin32]

@iamxiyang 确实，厉害!

看看官方怎么说，感觉默认的widthFix会好些

[ZakaryCode]

默认为 scaleToFill 是为了和小程序保持一致，可以参考 小程序文档

[gingerJY]

transformElement

你好，请问这个方法要写在哪里？我用transformElement，报错找不到

[tourze]

   Taro.options.html.transformElement = (el) => {
      if (el.nodeName === 'image') {
        el.setAttribute('mode', 'widthFix')
      }
      return el
    };

我觉得你的问题可以通过Taro提供的这个方法进行解决。

这是啥写法？有文档说明吗？

[iamxiyang]

这是啥写法？有文档说明吗？

@tourze @gingerJY

这是Taro3针对HTML渲染提供的，具体用法可以看一下教程，教程地址 https://taro-docs.jd.com/taro/docs/html#%E9%AB%98%E7%BA%A7%E9%80%89%E9%A1%B9

欢迎添加我创建的Taro QQ交流群：587912117 一起交流