Question

我的图像是通过API提供的。我们不关心初始原始大小是什么，但是我需要在src url的末尾附加一个查询来将图像调整为我们需要的大小。

查询如下所示：?w=168&h=168

需要在呈现Image组件的位置动态设置width和height值。我想通过道具这样做，但是你如何将尺寸附加到src道具？

这是我的组件：

import React from 'react';
import { classSet } from 'core/shared/utils';
import styles from './image.css';

const Image = ({ src, width }) => {
  const imageWidth = width / 2;

  return (<img className={classSet(styles.image, 'image')} src={src} style={{
    width: imageWidth,
    height: imageWidth
  }} />);
};

export default Image;

以下是组件的用法：

<Image {...{ src: getImageFromAssets(assets), width: 336, dispatch, id }} />

Answer 1

如何将尺寸附加到src prop？

src道具需要string个参数。就是这样。

回答你的问题：

<img className={classSet(styles.image, 'image')} src={src + `?w=${width}&h=168`} style={{
    width: imageWidth,
    height: imageWidth
}} />

只需附加到原始源字符串，另一个字符串！

Answer 2

解决方案 - 非常感谢Rico的指导。

组件：

function myEval = function(value){
    //do your stuff here
    //for example
    try {
        value = eval(value)
    } catch (error) {
        console.log(error)
        value = NaN
    }
    return value
}

用法：

import React from 'react';
import { classSet } from 'core/shared/utils';
import styles from './image.css';

const Image = ({ src, width, height }) => {
  return (<img className={classSet(styles.image, 'image')} src={`${src}?w=${width}&h=${height}`} width={width} height={height} />);

export default Image;

将图像尺寸附加到src url |应对

2 个答案: