json 显示来自另一个js文件的图像

ego6inou 于 2022-12-20 发布在其他

关注(0)|答案(3)|浏览(125)

我在显示js文件中的图像时遇到了问题。我真的不知道我能做些什么。有人能帮我吗？
主要部件代号：

import React from 'react'
import {jetData} from '../jetData'

const MainBar = () => {
  return (
    <div className='text-white'>
      {jetData.map((data, key) => {
          return (
            <div key={key}>
              {<img src={data.image} /> + data.name}
            </div>
          );
        })}
    </div>
  )
}

export default MainBar

包含数据的js文件代码：

import f18 from './assets/jets/f-18cd-hornet.png'
    import f22 from './assets/jets/f-22-raptor.png'
    import mig29 from './assets/jets/mig-29.png'
    import su27 from './assets/jets/Sukhoi_Su-27SKM.png'
    
    export const jetData = [
        {
            image: {f18},
            name: 'F/A-18 Hornet'
        },
        {
            image: {f22},
            name: 'F-22 Raptor'
        },
        {
            image: {mig29},
            name: 'MiG-29'
        },
        {
            image: {su27},
            name: 'Su-27'
        },
   ]

JSON

来源：https://stackoverflow.com/questions/74840196/display-image-from-another-js-file

3条答案

按热度按时间

r6vfmomb1#

检查如果这个工作，我希望它会工作，对不起，在这一点上，我不能运行它为您

return (
    <div className="text-white">
        {jetData.map((jet) => (
            <div key={jet.id}>
                <img src={jet.image} alt={jet.name} />
            </div>
        ))}
    </div>
);

赞(0）回复(0）举报 2022-12-20

dohp0rv52#

我认为你想做的是：

import logo from './logo.svg';

<img src={logo} className="App-logo" alt="logo" />

它可以很好地处理.svg文件，但不能处理.jpg和. png文件。原因似乎是import logo from './logo.svg';将路径存储在变量中，但import f18 from './assets/jets/f-18cd-hornet.png存储的是图像的字符串表示形式（在我看来）。
我认为这是应该走的路：

export const jetData = [
{
    image: './assets/jets/f-18cd-hornet.png',
    name: 'F/A-18 Hornet'
}]

赞(0）回复(0）举报 2022-12-20

jyztefdp3#

您的导入不需要放在大括号中：

import f18 from './assets/jets/f-18cd-hornet.png'
import f22 from './assets/jets/f-22-raptor.png'
import mig29 from './assets/jets/mig-29.png'
import su27 from './assets/jets/Sukhoi_Su-27SKM.png'
    
export const jetData = [
        {
            image: f18,
            name: 'F/A-18 Hornet'
        },
        {
            image: f22,
            name: 'F-22 Raptor'
        },
        {
            image: mig29,
            name: 'MiG-29'
        },
        {
            image: su27,
            name: 'Su-27'
        },
   ]

您的map键可能会抛出一个错误，因为您正在使用索引作为键。

{jetData.map((data) => {
        return (
           <div key={data.name}>
              <img src={data.image} alt={data.name} />
            </div>
          );
     })}

赞(0）回复(0）举报 2022-12-20

我来回答

json 显示来自另一个js文件的图像

3条答案

相关问题

热门标签

最新问答