如何要求将作为prop名称传入的图像放入反应组件中?

问题描述 投票:0回答:1

可以说我有一堆本地图像是我的反应项目的一部分。我有一个组件可以从更高的位置接受道具 - 其中一个道具是图像名称。所以使用,这可行。棘手的部分是我正在使用webpack,我认为这就是为什么我的图像不显示 - 它们没有被拉入。所以在我将组件转换为使用道具之前,图像名称是硬编码的,并且像这样工作:

        <img src={require('../images/products/image-aqua.png')}/>

但现在它看起来如下,并没有工作:

    <img src={this.props.productImageUrl} />

本质上,我试图跨越反应“动态”图像名称和webpack包装概念(我知道webpack url-loader和文件加载器)谢谢

image reactjs webpack
1个回答
1
投票

您应该发布您的webpack,以便我们可以进一步帮助您。上面的代码应该没问题。

这是我的img等webpack,它可以帮助您使用它。

{
        test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
        exclude: /\.glyph.svg/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 6000,
              name: 'image/[name].[ext]',
            },
          },
        ],
      },

您可能遇到的唯一其他问题是,当您的组件加载时,您的图像实际上并未加载。你有任何错误或他们只是没有显示?

enter image description here

class ProductList extends React.Component {
    render() {
        const product = Seed.products[0];
        return (
            <div className='ui unstackable items'>
                <Product
                    id={product.id}
                    title={product.title}
                    description={product.description}
                    url={product.url}
                    votes={product.votes}
                    submitterAvatarUrl={`${product.submitterAvatarUrl}`}
                    productImageUrl={`${product.productImageUrl}`}
                />
            </div>
        );
    }
}

class Product extends React.Component {
    render() {
        console.log("image name " + `${this.props.productImageUrl}`);

        return (
            <div className='item'>
                <div className='image'>
                    <img src={`${this.props.productImageUrl}`} /> {/*this.props.productImageUrl*/}
                </div>
                <div className='middle aligned content'>
                    <div className='header'>
                        <a>
                            <i className='large caret up icon' />
                        </a>
                        {this.props.votes}
                    </div>
                    <div className='description'>
                        <a href={this.props.url}>
                            {this.props.title}
                        </a>
                        <p>
                            {this.props.description}
                        </p>
                    </div>
                    <div className='extra'>
                        <span>Submitted by:</span>
                        <img
                            className='ui avatar image'
                            src={`${this.props.submitterAvatarUrl}`}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <ProductList />,
    document.getElementById('content')
);

...

import aqua from '../images/products/image-aqua.png';
import daniel from '../images/avatars/daniel.jpg';


export default window.Seed = (function () {
  function generateVoteCount() {
    return Math.floor((Math.random() * 50) + 15);
  }

  const products = [
    {
      id: 1,
      title: 'Yellow Pail',
      description: 'On-demand sand castle construction expertise.',
      url: '#',
      votes: generateVoteCount(),
      submitterAvatarUrl: daniel,
      productImageUrl: aqua,
    },
© www.soinside.com 2019 - 2024. All rights reserved.