'Image import failed in Netlify build but works locallly

Trying to import an image in my react component and the image is in an asset folder under the src directory as per below. There is a failure in the build due to the below code as per the attached build log below but works locally without any problem. What could be the problem in the below code?

Code :

import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import welcomeScreen from '../../assets/images/welcome-screen.jpeg';

class BannerCarousal extends Component {
    constructor(){
        super();
        this.state= {isDarkModeVariant:'light'||'dark'};
    }
    render() {
        return (
            <div>
                <Carousel variant={this.state.isDarkModeVariant}>
                     <Carousel.Item>
                        <img
                            className="d-block w-100"
                            src={welcomeScreen}
                            alt="First slide"
                        />
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>

File structure: enter image description here

build Logs:

9:46:57 AM: $ npm run build
9:46:57 AM: > [email protected] build /opt/build/repo/expense-tracker
9:46:57 AM: > react-scripts build
9:46:59 AM: Creating an optimized production build...
9:47:04 AM: Failed to compile.
9:47:04 AM: 
9:47:04 AM: Module not found: Error: Can't resolve '../../assets/icons/google.svg' in '/opt/build/repo/expense-tracker/src/components/signin'
9:47:04 AM: npm ERR! code ELIFECYCLE
9:47:04 AM: npm ERR! errno 1
9:47:04 AM: npm ERR! [email protected] build: `react-scripts build`
9:47:04 AM: npm ERR! Exit status 1
9:47:04 AM: npm ERR!
9:47:04 AM: npm ERR! Failed at the [email protected] build script.
9:47:04 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
9:47:04 AM: npm ERR! A complete log of this run can be found in:
9:47:04 AM: npm ERR!     /opt/buildhome/.npm/_logs/2022-04-20T04_17_04_059Z-debug.log
9:47:04 AM: ​
9:47:04 AM: ────────────────────────────────────────────────────────────────
9:47:04 AM:   "build.command" failed                                        
9:47:04 AM: ────────────────────────────────────────────────────────────────
9:47:04 AM: ​
9:47:04 AM:   Error message
9:47:04 AM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
9:47:04 AM: ​
9:47:04 AM:   Error location
9:47:04 AM:   In Build command from Netlify app:
9:47:04 AM:   npm run build
9:47:04 AM: ​
9:47:04 AM:   Resolved config
9:47:04 AM:   build:
9:47:04 AM:     base: /opt/build/repo/expense-tracker
9:47:04 AM:     command: npm run build
9:47:04 AM:     commandOrigin: ui
9:47:04 AM:     environment:
9:47:04 AM:       - NODE_VERSION
9:47:04 AM:       - REVIEW_ID
9:47:04 AM:     publish: /opt/build/repo/expense-tracker/build
9:47:04 AM:     publishOrigin: ui
9:47:04 AM: Caching artifacts
reactjsnpmnetlify


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions