Question

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

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

但现在它看起来如下，并且不起作用：

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

基本上，我正试图在飞行中做出反应＆＃34;＆＃34;图像名称和webpack包装概念（我知道webpack url-loader和文件加载器）谢谢

Answer 1

您应该发布您的网络包，以便我们为您提供进一步的帮助。上面的代码应该没问题。

这是我的img等webpack，当你尝试使用它时它会起作用。

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

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

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,
    },

如何要求将作为prop名称传入的图像放入react组件中？

1 个答案: