无法在ReactJS中显示图像？

Question

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

import myimg1 from './myimg1.png'

import myimg2 from './myimg2.png'

import myimg3 from './myimg3.png'

import myimg4 from './myimg4.png'

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

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>

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

Answer 1

请参阅images中没有名为images.js的类，所以

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

Answer 2

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

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

然后，在您的文件中，您将导入所有内部括号

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