React中img标签内Props不生效但外部可用的问题咨询

问题原因 #

你代码里的src='{avatarx}'写法错误：在JSX中，属性里的{}如果被单引号包裹，会被当作普通字符串处理，而不是解析JavaScript变量。这直接导致两个问题：

• 变量avatarx没有被真正引用，触发'avatarx' is assigned a value but never used警告
• src属性的值是字符串"{avatarx}"，不是生成的头像URL，所以图片无法加载

解决方法 #

去掉src属性的单引号，直接用{}包裹变量：

import React from "react";
import ReactDOM from "react-dom";
import { faker } from '@faker-js/faker';

const App = () => {
    const avatarx = faker.image.avatar();
    return ( 
        <img alt="avatar" src={avatarx} />
    );
}

ReactDOM.render(<App />, document.querySelector('#root'));

原理说明 #

JSX的属性规则很明确：

• 如果属性值是固定字符串，用引号包裹（比如alt="avatar"）
• 如果属性值是JavaScript变量/表达式，必须直接用{}包裹，不能加引号，React会自动解析其中的代码并替换为对应的值

修正后，src={avatarx}会正确引用变量生成的头像URL，图片能正常加载，同时变量被实际使用，警告也会消失。

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