Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
无法使用Node.js从MySQL将图像加载到React.js_Mysql_Node.js_Reactjs - Fatal编程技术网

无法使用Node.js从MySQL将图像加载到React.js

无法使用Node.js从MySQL将图像加载到React.js,mysql,node.js,reactjs,Mysql,Node.js,Reactjs,因此,我试图从数据库中获取数据,以便使用Node.js在React.js中显示产品。 问题是MySQL数据库中的图像无法加载 [这是我的数据库][1] 来自Nodejs服务器的代码: const cors=要求“cors”; const bodyParser=需要“body-parser”; const{response}=require'express'; const bcrypt=需要'bcrypt'; 常数salthards=10; dotenv.config{path:'./.env'}

因此,我试图从数据库中获取数据,以便使用Node.js在React.js中显示产品。 问题是MySQL数据库中的图像无法加载

[这是我的数据库][1]

来自Nodejs服务器的代码:

const cors=要求“cors”; const bodyParser=需要“body-parser”; const{response}=require'express'; const bcrypt=需要'bcrypt'; 常数salthards=10; dotenv.config{path:'./.env'}; const-app=express; app.useexpress.json; 应用程序使用 科尔斯{ 来源:['http://localhost:3001' ], 方法:[“获取”、“发布”], 凭据:正确 } ; app.get'/products',异步请求,res=>{ db.query'SELECT*FROM products',错误,结果=>{ 如果错误res.senderror; 结果; }; }; 数据显示在端口上:3000/类似的产品

[ { 产品编号:1000, 产品名称:多花蜂蜜, 价格:12.99, 描述:使用这款令人耳目一新的花蜜,全年享用新鲜蜂蜜的美味。, 数量:100, 图片:{ 类型:缓冲区, 数据:[ 137, 80, 78, 71, 13, 10, 26, 10, 0, 0,.... ] 反应代码: App.js中的ReactJs部分:

useEffect=>{ Axios,快http://localhost:3000/products'.thenresponse=>{ SetProductsResponse.data; console.logresponse.data; }; }, []; 我将其发送至:

    const Ourwork = ({ setProductsList, productsList }) => {
    
    return (
        <Work exit="exit" variants={pageAnimation} initial="hidden" animate="show">
            {productsList.map((product) => (
                <Product
                    productName={product.productName}
                    description={product.description}
                    price={product.price}
                    image={product.image.data}
                    url={product.url}
                />
            ))}
        </Work>
    );
};
我试图从数据库访问图像的位置:

const Product = ({ productName, url, price, image }) => {
    
    return (
        <ProductStyle>
            <Link to={url}>
                <SmallCircle onMouseOver={Scale} onMouseLeave={UnScale}>
                    <img src={image} />
                </SmallCircle>
            </Link>
            <h2>{productName}</h2>
            <h4>{price}</h4>
        </ProductStyle>
    );
};
问题是product.image没有定义

起初我认为这是431错误,但我将Node和NPM更新到了最新版本,并使用了-max http header size=16384,所以这里没有问题

我尝试将图像转换为base64,但它不起作用,但我仍然无法读取图像源


我被困在这里3天了,欢迎提供任何帮助!

您能以文本而不是图像的形式发布您的实现吗?我按照您的建议编辑了文章您能以文本而不是图像的形式发布您的实现吗?我按照您的建议编辑了文章