Question

您好，我正在使用nodejs通过以下方式将图像网址发送到我的前端：

app.use (cors ());
app.use ('/ uploads', express.static (path.resolve (__ dirname, '..', 'uploads')));

我正在使用multer保存从前端发送的图像而且我有一个功能可以发送保存在postgres中的所有产品

async getAllProduct(req,res){
    try {
        const results = await Products.findAll({
            // raw: true, <= remove
            attributes:['id','name', 'float', 'price','img_product', 'description'],
            include: [{
                model: SubCategory,
                as: 'subcategory',
                attributes: ['id','name'],
            },
            {
                model:Exteriors,
                as: 'exteriors',
                attributes: ['id','name']
            },
            {
                model:Types,
                as: 'types',
                attributes: ['id','name']
            },
        ],
        })

        let listProducts= results.map( (products) => {
            return {
                id: products.id,
                name: products.name,
                float: products.float,
                price: products.price,
                id_sub: products.subcategory.id,
                subcategory: products.subcategory.name,
                id_types: products.types.id,
                type: products.types.name,
                id_ext: products.exteriors.id,
                exterior: products.exteriors.name,
                img: products.img_product,
                description: products.description
            }
        })

        const fn = listProducts.filter(v => v.id_ext == 2)
        const mw = listProducts.filter(v => v.id_ext == 3)
        const ft = listProducts.filter(v => v.id_ext == 1)
        const ww = listProducts.filter(v => v.id_ext == 4)
        const bs = listProducts.filter(v => v.id_ext == 5)

        if(listProducts){return res.status(200).json({listProducts,fn,mw,ft,ww,bs})}
        else{return res.status(400).json({result: 'failed to get Products'})}
     } catch (error) {
         console.error(error);
     }
},

上传图片时，我将她的名字保存在她的数据库中： “ img”：“ Karambit-Slaughter-1-1575658490900.jpg”，

我想知道如何根据保存在前端产品列表中的她的名字和扩展名渲染图像：

9:
description: "dasdadsdasdasdasd"
exterior: "Factory New"
float: "11111111"
id: 1
id_ext: 1
id_sub: 1
id_types: 1
img: "Karam"M9 Baionet"
type: "Normal" "M9 Baionet"
type: "Normal"

我有一个包含所有图像名称信息的数组

在后端，我将它们全部保存在根目录下/上载

但是我不知道如何获得这个名称，并通过静态静态表达从后端获取它

我的前端：

export default function Cards() {
    const classes = useStyles();
    const classes2 = useStyles2();
    const dispatch = useDispatch();

    const loadProducts = useCallback(() => {
        /**
         * first call pass dispatch as the first argument
         */
        getAllProducts(dispatch);
    }, [dispatch, getAllProducts]);

    useEffect(() => {
        loadProducts();
    }, [loadProducts]);

    const products = useSelector(state => state.data.filteredProducts);



    return (

        <div className="App">
        <Container maxWidth="md" className={classes.root}>
        <Grid container md={4} spacing={1} ></Grid>
        <Grid container md={8} spacing={1} alignItems={"center"}>
        {products.map(product => (
            <Grid item lg={4} md={3} sm={12} xs={12}>
      <Card className={classes2.card}>
          <CardMedia
            className={classes2.media}
            image={
              "https://www.theclutch.com.br/wp-content/uploads/2019/11/skins-csgo-neymar.jpg"
            }
          />
          <CardContent className={classes2.content}>
            <Typography
              className={classes2.name}
              variant={"h6"}
              gutterBottom
            >
              {product.name}
            </Typography>
            <Typography
              className={classes2.price}
              variant={"h1"}
            >
             {util.formatCurrency(product.price)}
            </Typography>
          </CardContent>
        </Card>
            </Grid> 
        ))}
        </Grid>
        </Container>
      </div>
    );
}

node.js表达静态将图像url发送到前端

0 个答案: