javascript - 无法在 ReactJS 中显示图像？

Question

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

从 './myimg1.png' 导入 myimg1

从 './myimg2.png' 导入 myimg2

从 './myimg3.png' 导入 myimg3

从 './myimg4.png' 导入 myimg4

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

图像.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>

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

Answer 1

看到 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
}

content.js

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">