Question

我正在尝试将常量导入到具有图标所有路径的组件中。但是我相信图像是破碎的，但我尝试过的任何路径都不会显示

我有一个名为Tile的组件，该组件将是纯粹的呈现形式，还有一个TileContainer，该组件将带有徽标路径的const导入，我将做一些循环以将路径通过prop向下传递给Tile。

常数：资产位于：src / assets /

in: src/components/tile/TileLogoConst.js
    `const icons = [
        {
          alt: 'React Logo HAHHA',
          source: '../../assets/react.png'  
        }
    ];

    export default icons;`

TileContainer：在：src / components / Containers / tileContainer / TileContainer.js

import React, { Component } from 'react';
import Tile from '../../tile/Tile';
import icons from '../../tile/TileLogoConst'

class TileContainer extends Component {

    getIcons (icon) {
        const troll = icon.map((i) => {
            return i.source;
        });
        return troll;
    }

    render () {
        return (
            <div>
                <p>ITS ME</p>
                <img src={this.getIcons(icons)} alt="Trolololo" />
                {/* <Tile data={this.getIcons(icons)}/> */}
            </div>
        )
    }
}
export { TileContainer };

当我检查元素时，我可以看到路径已传递到DOM中的img src：

<img src="../../assets/react.png" alt="Trolololo">

但是图像看起来很破损，图像的路径是否必须指向从常量或从何处导入常量的正确路径？无论哪种方式，我都尝试。即使当我硬编码到img的路径时，它仍然显示为损坏

反应从常量导入图像路径

0 个答案: