Question

启动npm run watch并使用此路径src={require('../../../../storage/app/public/'+datas.file)}后，我当前遇到问题，控制台上显示错误。建议说，我需要在https://webpack.js.org/concepts#loaders

中进入此处

我可以问为什么在启动npm run watch之后会发生这种情况？

    WARNING in ./storage/app/public/oiM3JMg4xWttQ7oluBrGuUuenNWIIWNGCUacH509.docx 1:2
Module parse failed: Unexpected character '╚' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./storage/app/public sync ^\.\/.*$ ./oiM3JMg4xWttQ7oluBrGuUuenNWIIWNGCUacH509.docx
 @ ./resources/js/components/UserSide/Home.js
 @ ./resources/js/components/App.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./storage/app/public/Deo-Joshua-Crystalynus-O.docx 1:2
Module parse failed: Unexpected character '╚' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./storage/app/public sync ^\.\/.*$ ./Deo-Joshua-Crystalynus-O.docx
 @ ./resources/js/components/UserSide/Home.js
 @ ./resources/js/components/App.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./storage/app/public/5be3d06986720.docx 1:2
Module parse failed: Unexpected character '╚' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./storage/app/public sync ^\.\/.*$ ./5be3d06986720.docx
 @ ./resources/js/components/UserSide/Home.js
 @ ./resources/js/components/App.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./storage/app/public/5be3d003d6ff6.docx 1:2
Module parse failed: Unexpected character '╚' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./storage/app/public sync ^\.\/.*$ ./5be3d003d6ff6.docx
 @ ./resources/js/components/UserSide/Home.js
 @ ./resources/js/components/App.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

WARNING in ./storage/app/public/5be288d563181.docx 1:2
Module parse failed: Unexpected character '╚' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./storage/app/public sync ^\.\/.*$ ./5be288d563181.docx
 @ ./resources/js/components/UserSide/Home.js
 @ ./resources/js/components/App.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

我的页面在我开始运行跑步手表时出现警告。

import React, {Component} from 'react';
import axios from 'axios';
class Home extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list_home_data:[],
            list_slider_data:[]
        }
    }

    componentDidMount() {
        axios.get('/api/get_index_content').then(response => {
            console.log(response);
            this.setState({
                list_home_data:response.data[0].get_home_content,
                list_slider_data:response.data[0].get_slider
            })
        }).catch(error => console.log(error));


    }

    renderStoreDirectory() {
        return this.state.list_home_data.map((datas) => {
           if(datas.content_section == 'Store') {
               return (
                    <div key={datas.content_id}>
                        <div className="row">
                            <div className="col-md-6">
                                <img alt="example" src={require('./'+datas.file)}  style={{ width:'80%',height:'auto'}} />
                            </div>
                            <div className="col-md-2"></div>
                            <div className="col-md-4">
                                <h1>{datas.content_title}</h1>
                                <p dangerouslySetInnerHTML={{__html: datas.content}}></p>
                                <a href={datas.link} className="btn btn-primary btn-lg">Visit Us</a>
                            </div>
                        </div> 
                    </div>
               )
           }
       })
    }

    renderMission() {
        return this.state.list_home_data.map((datas) => {
            if(datas.content_section == 'Mission') {
                return (
                    <div key={datas.content_id}>
                        <h1>{datas.content_title}</h1>
                        <p dangerouslySetInnerHTML={{__html: datas.content}}></p>
                    </div>
                )
            }
        })
    }

    renderVision() {
        return this.state.list_home_data.map((datas) => {
            if(datas.content_section == 'Vision') {
                return (
                    <div key={datas.content_id}>
                        <h1>{datas.content_title}</h1>
                        <p dangerouslySetInnerHTML={{__html: datas.content}}></p>
                    </div>
                )
            }
        })
    }

    renderCareers() {
        return this.state.list_home_data.map((datas) => {
           if(datas.content_section == 'Career') {
               return (
                    <div key={datas.content_id}>
                        <div className="row">
                            <div className="col-md-5">
                                <h1>{datas.content_title}</h1>
                                <p dangerouslySetInnerHTML={{__html: datas.content}}></p>
                                <a href={datas.link} className="btn btn-primary btn-lg">See positions here</a>
                            </div>
                            <div className="col-md-1"></div>
                            <div className="col-md-6">
                                <img alt="example" src={require(''+ datas.file)}  style={{ width:'80%',height:'auto'}} />
                            </div>
                        </div> 
                    </div>
               )
           }
       })
    }

    render() {

        return (
            <div> 
                <div className="carousel-wrapper">
                    <div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
                        <div className="carousel-inner">
                            <div className="carousel-item active">
                                <img alt="example" src={require('../../../../assets/1.jpg')} className="d-block w-100"/>
                            </div>
                            <div className="carousel-item">
                                <img alt="example" src={require('../../../../assets/2.jpg')} className="d-block w-100"/>
                            </div>
                            <div className="carousel-item">
                                <img alt="example" src={require('../../../../assets/3.jpg')} className="d-block w-100"/>
                            </div>
                        </div>
                        <a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                            <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span className="sr-only">Previous</span>
                        </a>
                        <a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                            <span className="carousel-control-next-icon" aria-hidden="true"></span>
                            <span className="sr-only">Next</span>
                        </a>
                    </div>
                </div>



                <div className="store-directory-wrapper">
                    <div className="container">
                        {this.renderStoreDirectory()}
                    </div>
                </div>

                <div className="mission-vision-wrapper">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-6">
                                {this.renderMission()}
                            </div>
                            <div className="col-md-6">
                                {this.renderVision()}
                            </div>
                        </div>
                    </div>
                </div>
                <br/><br/>
                <div className="careers-wrapper">
                    <div className="container">
                       <div className="row">
                            {this.renderCareers()}
                       </div>
                    </div>
                </div>

            </div> 
        );
    }
}

export default Home;

谢谢。

Answer 1

您可以像使用普通HTML一样设置require，而不用使用src来拉入文件，

src={'/storage/' + datas.file}

但是，您仍然需要执行检查以确保它是真实图像，而不是Word文档。

Answer 2

您必须启动

yarn run fetch

早于准备

yarn run start

如何修复没有加载程序配置为处理此文件。请参阅webpack.js网站

2 个答案: