在React.js中加载本地映像

Question

我已经使用create-react-app安装了React。它安装得很好，但我试图在我的一个组件（Header.js，文件路径：src/components/common/Header.js）中加载图像，但它没有加载。这是我的代码：

import React from 'react'; 

export default () => {
  var logo1 = (
    <img 
      //src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-goose.jpg"
      src={'/src/images/logo.png'}
      alt="Canvas Logo"
    />
  );
  return (
    <div id="header-wrap">
      <div className="container clearfix">
        <div id="primary-menu-trigger">
          <i className="icon-reorder"></i>
        </div>

        <div id="logo">
          <a href="/" className="standard-logo" data-dark-logo='/images/logo-dark.png'>{logo1}</a>
          <a href="/" className="retina-logo" data-dark-logo='/images/[email protected]'>
            <img src='/var/www/html/react-demo/src/images/[email protected]' alt="Canvas Logo" />
          </a>
        </div>
      </div>
    </div>
  );
} 

如果我在src={require('./src/images/logo.png')}变量中将图像路径写为logo1，则会出现错误：

编译失败。

./src/Components/common/Header.js出错

未找到模块：/ var / www / html / wistful / src / Components / common中的./src/images/logo.png

请帮我解决这个问题。让我知道我在这里做错了什么。

Answer 1

如果您对创建React App有疑问，我建议您阅读它的User Guide。 它回答了这个以及您可能遇到的许多其他问题。

具体来说，要包含本地图像，您有两种选择：

1. Use imports：

   // Assuming logo.png is in the same folder as JS file
   import logo from './logo.png';
   
   // ...later
   <img src={logo} alt="logo" />

这种方法很棒，因为所有资产都由构建系统处理，并且将在生成构建中获得带有哈希的文件名。如果移动或删除文件，您也会收到错误。

缺点是，如果您有数百张图片，可能会变得很麻烦，因为您无法拥有任意导入路径。

2. Use the public folder:

   // Assuming logo.png is in public/ folder of your project
   <img src={process.env.PUBLIC_URL + '/logo.png'} alt="logo" />

通常不推荐这种方法，但如果您有数百张图像并且逐个导入它们太麻烦，那就太棒了。缺点是您必须考虑缓存清除并自己注意移动或删除的文件。

希望这可以帮助！

Answer 2

如果你想要像你一样用local relative URL加载图像。 React项目有一个默认的public文件夹。你应该把你的images文件夹放在里面。它会工作。

Answer 3

您有不同的方法来实现这一点，这是一个例子：

import myimage from './...' // wherever is it.

在你的img标签中只需将其放入src中：

<img src={myimage}...>

您还可以在这里查看官方文档：https://facebook.github.io/react-native/docs/image.html

Answer 4

而不是使用img src =“”，尝试创建一个div并将背景图像设置为您想要的图像。

现在它正在为我工​​作。

例：

App.js

import React, { Component } from 'react';
import './App.css';



class App extends Component {

  render() {
    return (
      <div>
        <div className="myImage"> </div>
      </div>
    );
  }
}

export default App;

App.css

.myImage {
  width: 60px;
  height: 60px;
  background-image: url("./icons/add-circle.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

Answer 5

为了将本地图像加载到React.js应用程序，您需要在媒体部分或图像标记中添加require参数，如下所示：

image={require('./../uploads/temp.jpg')}