Javascript 如何从react应用程序输出json图像文件扩展名

我正在尝试从带有图像文件名的JSON文件输出图像。让我解释一下。 现在，包含产品列表的JSON文件位于： frontend>src>product.json

下面是product.json文件：

“文章”：[
{
“id”：“233300”，
“名称”：“Lorem ipsum”，
“可用性”：{
“isAvailable”：正确，
“状态”：“1”，
“工具提示”：“Lorem ipsum dolor sit amet，Concertetur adipiscing Elite”，
“文本”：“立即可用”，
“richSnippet”：“InStock”
},
“图像”：{
“类型”：“LORENPPSBN”，
“文件”：“123456.jpg”，
“宽度”：“139”，
“高度”：“400”，
“存在”：真实
}
}，

，因为您的图像位于图像文件夹下。您需要在代码中提供该路径

src={`/images/${articles.image.file}`}

从“React”导入React
从“react bootstrap”导入{Card}
常量乘积=（{articles}）=>{
返回(
)
}
导出默认产品

亲爱的Yadab，谢谢你的帮助，这么简单的解决方案让我头疼不已。感谢你的帮助。-你知道从jso文档导入样式的最佳选择是什么吗？我感谢你的帮助。你只需“导入”css_file_path即可。你也可以接受这一点作为你问题的答案。

import React from 'react'
import { Card } from 'react-bootstrap'

const Product = ({ articles }) => {
  return (
    <Card
      key={articles.id}
      className='my-3 p-3 rounded'
      style={{ width: '16rem' }}
    >
      <a href={`/articles/${articles.id}`}>
        <Card.Img src={`/images/${articles.image.file}`} variat='top' />
      </a>
    </Card>
  )
}

export default Product