Javascript 无法在ReactJS中显示图像？

我有多个图像，而不是像这样在我的content.js中导入每个图像，例如：

从“/myimg1.png”导入myimg1

从“/myimg2.png”导入myimg2

从“/myimg3.png”导入myimg3

从“/myimg4.png”导入myimg4

我制作了images.js，然后将images.js中的每个图像导入并导出，这样我就可以在content.js中访问这些图像：

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

<img src={images.java} alt="Java" height="65" width="65"></img>

 <img src={images.neural} alt="Neural Network" height="65" width="65"></img>

images.js：

import java from './images/java.png';
import neural from './images/neural.png';
import logo from './images/logo.png';
import dsa from './images/dsa.png';
import dl from './images/dl.jpeg';
import ds from './images/ds.jpeg';
import boy from './images/boy.jpeg';
import ml from './images/ml.jpeg';
import phone from './images/phone.png';

export default {
    java,
    logo,
    dsa,
    dl,
    ds,
    boy,
    ml,
    neural,
    phone
}

在content.js中：

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

<img src={images.java} alt="Java" height="65" width="65"></img>

 <img src={images.neural} alt="Neural Network" height="65" width="65"></img>

import React，{Component}来自'React'；
从“./images”导入图像；

我制作了一个包含所有图像的图像文件夹，但我无法访问这些图像并将其显示在content.js组件中

---

导出

默认值

仅用于只有一个导入功能的情况，在您的情况下，您应该不使用

默认值

export {
    java,
    logo,
    dsa,
    dl,
    ds,
    boy,
    ml,
    neural,
    phone
}

然后，在文件中，导入括号内的所有内容

import { java, logo, dsa.. } from './yourFilePath'

---

请参见在

images.js

中没有名为

images

的类，因此

import images from './images'

在

content.js

中不会执行任何操作，因此请尝试这种方法

images.js

import java from './images/java.png';
import logo from './images/logo.png';

export {
    java,
    logo
}

import React, { Component } from 'react';
import { java, logo } from './images';

<img src={java} alt="" height="65" width="65">
<img src={logo} alt="" height="65" width="65">

content.js

import java from './images/java.png';
import logo from './images/logo.png';

export {
    java,
    logo
}

import React, { Component } from 'react';
import { java, logo } from './images';

<img src={java} alt="" height="65" width="65">
<img src={logo} alt="" height="65" width="65">

import React，{Component}来自'React'；
从“/images”导入{java，logo}；

例如，

images.java

会有什么结果？@HuyVo我在src=”“中使用images.java检查问题您是否尝试过console.log

images.java

？它不呈现您的图像的原因是因为

images.java

为空。@HuyVo我想您没有回答我的问题。我正在从images.js组件内的images文件夹导入所有图像，然后将其导出到content.js，但它不起作用。它不起作用的原因是您以错误的方式导入或导出了它。请参阅屏幕截图：它说的是导出默认值。我在代码中也做了以下更改查看多个屏幕截图：我想你没有回答我的问题。我正在从images.js组件中的images文件夹导入所有图像，然后将其导出到content.js，但它不起作用。如果你看到这个答案，与@BhuwanCan你在这里发布相同的答案吗？我将投票：）@stonerock很高兴它帮助了你。。！。。看，没有必要在同一个问题上发布相同的答案…我认为你应该删除前面的问题。。。