Home / Questions / 195271
Accepted
Rafael Hernández
Asked: 2020-09-10 01:30:03 +0800 CST 2020-09-10 01:30:03 +0800 CST

我无法使用 reactjs 显示图像

  • 772

在 app.js 我想显示一个图像。

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

import Image from './components/Image';
import Input from './components/Image';

class App extends Component {
  render() {
    return (
      <div>
        <Image
          id={1}
          src="./components/indice.png"
        />
       <img src={require('/components/indice.png')}/>

        <Input
         id={2}
         type="text"
        />

      </div>
    );
  }
}

export default App;

在我读过的一些帖子中，您必须将图像放在公用文件夹中，而其他人使用 src={require(path-image.jpg) 它是如何完成的？我只是从 reactjs 开始。

javascript

5 Answers

  1. Best Answer

    要在 React js 中显示图像，您有两种简单的方法。

    1. 导入图像
    2. 使用远程或本地服务器上的图像的 url。

    示例 1

    我们只需要将图像导入到我们的组件中，即

    import React, { Component } from 'react';
//Aqui importamos nuestra imagen
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        {/*Y en la etiqueta img simplemente la mostramos*/}
        <img src={logo} />
      </div>
    );
  }
}

export default App;

    对于示例 1，我们将图像存储在哪个文件夹中并不重要。

    示例 2： 

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

class App extends Component {
  render() {
    return (
      <div className="App">
        {/*Aqui utilizamos la url donde esta alojada la imagen*/}
        <img src="https://hdwallpaperim.com/wp-content/uploads/2017/08/25/461264-reactJS-Facebook-JavaScript-minimalism-artwork-simple_background-748x421.jpg" />
      </div>
    );
  }
}

export default App;

    在您有一个 Image 组件的情况下，您正在向它传递一个 src 属性，我知道稍后在该组件中您将使用它来搜索图像。

    您可以从将图像作为属性传递的父组件中进行设置，即：

    父组件

    import React, { Component } from 'react';
{/*Importamos nuestro componente Image*/}
import Image from './Image';

{/*Importamos la imagen que le vamos a pasar a nuestro componente hijo*/}

import logo from './logo.svg'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
      {/*Renderizamos nuestro componente y le pasamos la imagen importada*/}
        <Image src={logo} />
      </div>
    );
  }
}

export default App;

    然后在我们的子组件中，我们只需通过props获取所述图像。

    import React, { Component  } from 'react';


class Image extends Component{


  render() {

    return(
      {/*Mostramos la imagen que nos viene del componente padre, en la etiqueta*/}
      <img src={this.props.src} />
    )
  }
}

export default Image;

    这是要测试的代码。

    演示

    我希望它对你有所帮助。

    干杯！！！

    • 6

  2. 在反应中，您无法导入 src 文件夹之外的任何内容。

    如果您将图像放在公用文件夹中，要获取图像，您必须这样做：

    常量图像 = '图像/图像.jpg'

    以这种方式，它正在寻找公用文件夹中的图像文件夹。

    如果你想像这样导入它们而不是将路径保存到常量，你应该把你的 images 文件夹放在 src 文件夹中。

    • 2

  3. 如果您想将 assets 文件夹保存在 src 中并在组件中动态加载图像，您可以使用 require.context() 。require.context来自webpack

    const cargarImagen = require.context("./tu_patch_assets", true);

<img src={cargarImagen(`./${ nombre_imagen }.jpg`)} alt={nombre_imagen} />
    • 1

  4. 您还必须小心 package.json 中指定的主页。如果你有票：

    homepage: /subdomain

    ，你必须把你的src：

    src={"./subdomain/"+filename+".jpg"}
    • 0

  5. 其实上面的一些评论是错误的。如果可以把图片资源放在public文件夹里面，只是为了调用它们，就不应该放../离开目录，只能按正常的方式放，比如。

    在这里，我导入了一个文件夹内的图像，该文件夹位于公共文件夹内。

    （正确的方式）= { 在此处输入图像描述 }

    （错误的方式）= { 在此处输入图像描述 }

    • 0