如何在React组件中导入图像(.svg,.png)

JavaScript React.js

卡卡西Near

2020-03-19

我正在尝试在我的react组件之一中导入图像文件。我使用Web Pack进行了项目设置

这是我的组件代码

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控制台也没有给我任何错误。请任何帮助。我很新来做出反应,无法找到我做错了什么。

第2241篇《如何在React组件中导入图像(.svg,.png)》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android