Question

我正在创建一个网站，我想将图像URL传递给组件。我该怎么办？

我尝试过：

App.js：

    import React from 'react';
    import './App.css';

    import Elem from './Elem.js';

    const App = () => {

      return (

          <Prod imgUrl="../../url/to/img.png"/>

        </div>
      );
    }

    export default App;

Elem.js：

    import React from 'react';
    import './Elem.css';

    const Prod = ({imgUrl}) => {
        return (
            <div className="elem">
                <div className="elemImg">
                    <img src={require(`${imgUrl}`)} alt="" />
                </div>
            </div>
        );
    }

    export default Elem;

但是它给了我错误：

错误：找不到模块'../../ url / to / img.png'

Answer 1

我建议导入图像而不是直接使用路径。

php -v

如果您真的想直接使用路径，建议您从入口点调整路径。

假设您的入口点是import myImage from 'path/to/image.png' const App = () => <ImageComponent src={myImage} /> const ImageComponent = props => <img src={props.src} />，则相对路径应基于该文件，而不是index.html文件中的文件。

将图像传递给react.js组件

1 个答案: