相关疑难解决方法(0)

我试图在我的一个反应组件中导入一个图像文件.我有web包的项目设置

这是我的组件代码

import Diamond from '../../assets/linux_logo.jpg';

 export class ItemCols extends Component {
    render(){
        return (
            <div>
                <section className="one-fourth" id="html">
                    <img src={Diamond} />
                </section>
            </div>
        )
    } 
}

这是我的项目结构.

我按以下方式设置了我的webpack.config.js文件

{
    test: /\.(jpg|png|svg)$/,
    loader: 'url-loader',
    options: {
      limit: 25000,
    },
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

PS.我可以从任何其他远程源获取图像,但不能从本地保存的图像.JavaScript控制台也没有给我任何错误.请帮忙.我很反应,无法找到我做错了什么.

我正在使用React应用程序并使用Webpack和Typescript.我想在其中一个<img/>标签中使用图像.但是,我没有找到正确的方法来访问图像文件.

webpack.config.js:

 ...
 module: {
        rules: [
            ...
            {
                test: /\.(png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'assets/[name].[ext]',
                }
            }
        ]

app.tsx:

...
render() {
    return <img src='/assets/logo-large.png' alt="logo"/>
}

运行应用程序时,assets/logo-large.png找不到资源.