Reactjs local image not loading

reactjs

2017-06-18 62 views 1 likes

我在我的reactjs文件中本地加载映像时遇到问题。任何帮助都是极好的。由于Reactjs local image not loading

无法编译 ./src/components/pages/home.js

模块未发现：在“C无法解析 '../Assets/images/Thomas-overlay3.jpg'： \ Users \ tcmar \ Documents \ ThomasWebsite \ mywebsite \ src \ components \ pages'

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

我的代码：

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;

来源

2017-06-18 Tom

您是否试图从'some-image.jpg'中导入图像？你能粘贴你的代码吗？ – webdeb

我试图从我的资产/图像文件夹中导入图像 – Tom

您的期望是什么？ – webdeb

回答

你的资产应该在其中担任是服务器的一些public/文件夹。

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

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

或者，你可以使用webpacks file-loader并加载它想：

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

然而，这将加载该文件，并发出副本在公共文件夹中自动，如果这是你想要的。

来源

2017-06-18 00:41:27 webdeb

就是这样！非常感谢......为什么我无法在我的src文件夹中使用图像文件夹？ – Tom

，因为你的src文件夹不公开，查看我的编辑，你可以使用'file-loader'从src载入它，它将创建公共文件并返回正确的路径。 – webdeb

甜！谢谢您的帮助！ – Tom

Reactjs local image not loading

回答

相关问题