Laravel环境下React JS的JSX功能组件变量无法在HTML标签使用

错误原因 #

JSX语法中，给标签属性传入动态变量时，不能将包裹变量的大括号放在双引号内部。你写的"{MIX_APP_URL}"会被直接识别为普通字符串，不会解析对应的变量值。

修正方案 #

去掉src属性中包裹{MIX_APP_URL}的双引号即可，修正后的完整代码如下：

import React from 'react';

// 功能组件
const HeaderComp = () => {
    const MIX_APP_URL = process.env.MIX_APP_URL;
    console.log(MIX_APP_URL); // 控制台打印正常
    return (
        <header>
            {/* 修正后可正常读取变量值 */}
            <img src={MIX_APP_URL} className="img img-fluid" alt="站点资源" />
        </header>
   );
};

补充提示：img标签建议添加alt属性，符合HTML可访问性规范要求。

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