Question

我在我的reactjs文件中本地加载图像时遇到问题。任何帮助都是极好的。感谢

编译失败 ./src/components/pages/home.js

找不到模块：无法解析'C：\ Users \ tcmar \ Documents \ ThomasWebsite \ mywebsite \ src \ components \ pages'中的'..Assets/images/Thomas-overlay3.jpg'

在构建期间发生此错误，无法解除。

我的代码：

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <div className="container">
        <div className="hero-image">
          <img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" />
        </div>
        <div className="hero-text">
          Hello, My Name is <span>Thomas</span>
        </div>
      </div>
    );
  }
}

export default Home;

Answer 1

您的资源应该放在服务器按原样提供的某个public/文件夹中。

然后你可以参考实际的资源：

...
<img src="/assets/my-image.jpg" />
...

或者，您可以使用webpacks file-loader并将其加载为：

<img src={require("file-loader!./file.png")} />

但是，这将加载文件并自动在公用文件夹中发出副本，如果这是您想要的。

更多信息：https://github.com/webpack-contrib/file-loader

Reactjs本地图像未加载

1 个答案: