找不到模块：无法解析 'C:\Users\MSI\Desktop\cake-app\src\Components\Product' 中的“../../images/jelly”

Question

请有人帮我解决这个错误。我不明白错误的原因

import React from 'react'
import styled from 'styled-components'
import CustomButton from "../CustomButton/CustomButton"; 
import logo from "../../images/jelly"; // svg icon  
// I also tried this method but I got the same error
// import { ReactComponent as Logo } from "../../images/jelly"; 


const Product = () => {
    return (
        <Wrapper>
            <img src={logo} alt="logo" />
            {/* <Logo></Logo> */}
            <div className="content">
                <h4>Chocolate</h4> 
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
             </div>
             <CustomButton> | Order Now </CustomButton>
        </Wrapper>
    )
}

export default Product

const Wrapper = styled.div``

enter image description here

Answer 1

您需要在文件名中添加.svg：import logo from "../../images/jelly.svg";

找不到模块：无法解析 'C:\Users\MSI\Desktop\cake-app\src\Components\Product' 中的“../../images/jelly”

Module not found: Can't resolve '../../images/jelly' in 'C:\Users\MSI\Desktop\cake-app\src\Components\Product'

svg

components

reactjs

webpack

babeljs