React中如何绑定JS数组内的img src路径与页面跳转链接

1. 核心语法错误修复 #

你当前的写法info.[1].src不符合JavaScript语法规则，数组通过索引访问元素时不需要额外加.，正确的访问格式为info[1].src。将代码中所有info.[1]的写法统一修改为info[1]，即可直接解决索引调用报错的问题。

2. 代码可读性优化 #

可以提前提取Bolt项目对应的数据项，避免重复书写索引，也降低后续索引写错的概率：

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Btt from "./BackToTop";
import info from "../info";

function Bolt() {
    // 可通过标题匹配或者直接取索引获取对应数据
    const boltItem = info.find(item => item.title === 'Bolt') || info[1];
    return(
        <div>
            <Header />
            <div>
                <h1 className="projHead">Bolt</h1>
                <div className="card-img-top">
                    <img src={boltItem.src} alt="" className="banner" />
                </div>
            </div>

            <div className="text1">
                <h3>Mind Map</h3>
            </div>
            <div className="card-img-top"><img src={boltItem.pic1} alt="" className="isoimg" /></div>
            <div className="card-img-top"><img src={boltItem.pic2} alt="" className="isoimg" /></div>
            <div className="card-img-top"><img src={boltItem.pic3} alt="" className="isoimg" /></div>
            <div className="card-img-top"><img src={boltItem.pic4} alt="" className="isoimg" /></div>

            <div className="text1">
                <h3>Screen Layouts</h3>
            </div>
            <div className="card-img-top"><img src={boltItem.pic5} alt="" className="isoimg" /></div>

            <div className="text1">
                <h3>Mockups</h3>
            </div>
            <div className="card-img-top"><img src={boltItem.pic6} alt="" className="smallisoimg" /></div>

            <Btt />   
            <Footer />
        </div>
    );
}

export default Bolt;

3. 本地图片路径适配 #

如果你使用的是Create React App、Vite这类前端构建工具，需要注意图片存放位置和路径的对应规则：

• 如果图片存放在项目public目录下，你当前写的相对路径可以直接正常生效
• 如果图片存放在src目录下，需要在info.js中提前导入图片资源再赋值，示例如下：

// info.js修改示例（src目录下存放图片的场景）
import boltSrc from './assets/images/Bolt/Bolt.jpg'
import boltPic1 from './assets/images/Bolt/bs1.png'
// 其余图片同理导入后再赋值给对应字段
const info = [
    // ...省略AR mirror项目配置
    {
        id:    2,
        title: "Bolt",
        about: "Bolt is an app for electric bikes which allows user to monitor the bike from remote distance and functions as a control panel.",
        src:   boltSrc,
        pic1: boltPic1,
        // ...其余字段保持不变
    }
];
export default info;

4. 进阶优化：重复节点批量渲染 #

你可以把重复的图片节点用数组遍历渲染，减少重复代码：

{/* Mind Map部分的4张图片批量渲染 */}
{[boltItem.pic1, boltItem.pic2, boltItem.pic3, boltItem.pic4].map((pic, index) => (
    <div key={index} className="card-img-top">
        <img src={pic} alt="" className="isoimg" />
    </div>
))}

内容的提问来源于stack exchange，提问作者Pranav Pagar