从 express API 获取图像答案

【问题标题】：Fetching an image from express API从 express API 获取图像
【发布时间】：2021-06-14 21:33:29
【问题描述】：

我正在尝试从我的 express API 中获取图像。我使用 multer 将图像存储在我的服务器上。这些图像位于名为 uploads 的文件夹中。如果我将服务器上图像的完整路径输入到 insomnia/postman，我会得到返回的图像。

请求如下所示（从 MongoDB 返回）：

[
  {
    "_id": "60c6207219cf2bbf04c79a84",
    "nimi": "Selkätreeni",
    "treeninkesto": "60-75min",
    "image": "uploads/selkaToinen.jpg",
    "__v": 0
  },
  {
    "_id": "60c620b019cf2bbf04c79a85",
    "nimi": "Rintatreeni",
    "treeninkesto": "60-75min",
    "image": "uploads/rintaToinen.jpg",
    "__v": 0
  },
  {
    "_id": "60c620bb19cf2bbf04c79a86",
    "nimi": "Jalkatreeni",
    "treeninkesto": "60-75min",
    "image": "uploads/jalatToinen.jpg",
    "__v": 0
  },
  {
    "_id": "60c620c219cf2bbf04c79a87",
    "nimi": "Käsitreeni",
    "treeninkesto": "60-75min",
    "image": "uploads/kadetToinen.jpg",
    "__v": 0
  }
]


const Cards = () => {
    const [cardData, setCardData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [imageUrl, setImageUrl] = useState('');

   

    async function _getCardData() {
        try {

            await axios.get('MY-IP-ADDERSS:3000/api/cards/etusivucards')
            .then(response => {
                console.log(response.data);                
                setCardData(response.data);
                /* response.data.map(function(item, index) {
                    console.log(item.image)
                }) */
                
            })
            .catch(err => {
                console.log(err)
            })
            .finally(() => {
                setLoading(false);
            })
        } catch(err) {
            console.error(error);
        }

    }

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


return (
                <ScrollView style={{marginTop: 25}}>
            {
                cardData.map((item, index) => {
                    const img = item.image;

                    return(
                        <TouchableOpacity key={index}>
                        <Tile
                        imageSrc={ `MY-IP-ADDRESS:3000/api/${img}}`}
                        title={<Text title style={{color: '#FFF', fontFamily: 'MontserratBold'}}>{item.nimi}</Text>} featured
                        caption=
                        {<View style={{ flexDirection: 'row'}}>
                        <Text medium style={{color: '#FFF', fontFamily: 'MontserratSemiBold'}} >{item.treeninkesto}
                        </Text>
                        </View>
                        }
                        containerStyle={{ marginBottom: 5, marginLeft: 8.5}}  
                        height={150}  
                        width={'98%'}   
                        imageContainerStyle={{opacity: 0.9, borderRadius: 10}}
                                                
                        />
                       
                        </TouchableOpacity>
                    );
                })
            }
            </ScrollView>
            )

我能够渲染响应中的所有其他内容，但我无法在前端的卡片元素上渲染图像，其中 {item.image} 在内联映射函数中迭代状态数组，其中我存储了 response.data。我究竟做错了什么？任何帮助表示赞赏！

【问题讨论】：

能否请您显示您尝试渲染图像的代码以及您收到的具体错误消息？
添加了前端代码:)

标签： node.js reactjs express

【解决方案1】：

imageSrc={ `MY-IP-ADDRESS:3000/api/${img}}`}

看起来最后一个反引号在此行中的位置错误，或者您在最后一个反引号之前添加了一个额外的大括号。

【讨论】：