在React应用程序中使用jsx文件中的图像时解决url加载程序错误

Question

我正在重写旧代码，我想将图像定义从.css文件( background: url('./../images/something.svg') )移到.jsx，并且我要删除webpack，并且只想使用react脚本。当我将图像移动到.jsx文件时，我首先导入图像import something from '../../../images/something.png';，然后再使用<img src={something} alt="Something" />，最后得到的是错误Module build failed (from ./node_modules/resolve-url-loader/index.js): Error: resolve-url-loader: error processing CSS file://C:\dev\my-project\src\images\something.png:1:1: Unknown word或Unclosed string

Answer 1

当您将图像导入jsx文件时，您的语法如下所示

import img from '../../../images/something.png'

const App = () => {
  return(
    <>
      <img src={img}/>
    </>
  );
}

导入时，将图像添加到“变量”(在本例中是img )

Answer 2

在此行中导入footer时，import footer from '../../../images/something.png';必须将footer用作attribute值img标记中的variable，因为它指定了图像的路径。

例如,

代码必须是

<img src={footer} alt="Something" />

而不是

<img src={something} alt="Something" />