React调用Node.js图片API报错及外部变量赋值问题咨询

Hey there! Let's tackle your two questions one by one—first fixing that frustrating SyntaxError, then sorting out how to store your image URL for reuse.

Why You're Seeing That Error #

That weird Unexpected token 锟� error is happening because your frontend is trying to parse the image as JSON, but images are binary data, not valid JSON. Chances are your fetch code uses .json() at the end, which works for API responses but breaks completely for image files.

React Fix: Fetch Images Correctly #

Instead of parsing with .json(), use .blob() to handle the binary image data, then create a usable URL for your <img> tag. Here's the correct approach:

import { useState, useEffect } from 'react';

function ImageViewer() {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    const fetchImage = async () => {
      try {
        const imgUrl = 'http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg';
        const response = await fetch(imgUrl);
        
        if (!response.ok) throw new Error(`Failed to fetch: ${response.status}`);
        
        // Handle binary image data with blob()
        const imageBlob = await response.blob();
        // Create a URL that the img tag can use
        const usableUrl = URL.createObjectURL(imageBlob);
        
        setImageUrl(usableUrl);
      } catch (err) {
        console.error('Image fetch error:', err);
      }
    };

    fetchImage();
  }, []);

  // Clean up the blob URL when component unmounts to avoid memory leaks
  useEffect(() => {
    return () => {
      if (imageUrl) URL.revokeObjectURL(imageUrl);
    };
  }, [imageUrl]);

  return imageUrl ? <img src={imageUrl} alt="Fetched image" /> : <p>Loading...</p>;
}

Pro Tip: Even Better—Skip Fetch Entirely #

Since your image is already publicly accessible via the direct URL, you don't need to use fetch at all! Just assign the URL directly to your <img> src:

// Way simpler, no fetch needed
function ImageViewer() {
  const imgUrl = 'http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg';
  return <img src={imgUrl} alt="Directly loaded image" />;
}

Node.js Optimization #

If you're manually handling image requests in your Node server, switch to using Express's built-in express.static middleware—it's faster, cleaner, and handles headers automatically:

const express = require('express');
const app = express();
const path = require('path');

// Serve all files in the "source" directory under the /source route
app.use('/source', express.static(path.join(__dirname, 'source')));

// No need for custom routes for image files anymore!
// Your old custom route (replace with the line above):
// app.get('/source/:filename', (req, res) => {
//   const filePath = path.join(__dirname, 'source', req.params.filename);
//   res.sendFile(filePath);
// });

app.listen(3000, () => console.log('Server running on http://192.168.22.124:3000'));

How you do this depends on whether you're working with a direct URL or a fetched blob, and where you need to use the variable.

Case 1: Direct Public URL (Simplest) #

If your image is publicly accessible, just assign the URL directly to your external variable. Just make sure you handle timing if you're using it in async code:

// External variable (could be in a separate file, global scope, etc.)
let jpg = '';

// Function to set the URL
const setImageUrl = () => {
  const fetchURL = 'http://192.168.22.124:3000/source/';
  const images = '592018124023PM-pexels-photo.jpg';
  jpg = `${fetchURL}${images}`;
};

// Call the function to set the variable
setImageUrl();

// Now you can use jpg anywhere else (just make sure it's set first!)
console.log(jpg); // Logs the full image URL

Case 2: Fetched Blob URL (Async) #

If you need to fetch the image (e.g., for authentication), you'll need to handle the async nature of fetch. For React apps, using state is the best practice (so your component re-renders when the URL is ready):

import { useState, useEffect } from 'react';

// External variable (optional, but state is better for React)
let externalJpg = '';

function ImageComponent() {
  const [localImageUrl, setLocalImageUrl] = useState('');

  useEffect(() => {
    const fetchAndSetImage = async () => {
      const imgUrl = 'http://192.168.22.124:3000/source/592018124023PM-pexels-photo.jpg';
      const response = await fetch(imgUrl);
      const blob = await response.blob();
      const usableUrl = URL.createObjectURL(blob);

      // Assign to external variable
      externalJpg = usableUrl;
      // Also set to component state for rendering
      setLocalImageUrl(usableUrl);
    };

    fetchAndSetImage();
  }, []);

  return <img src={localImageUrl} alt="Fetched image" />;
}

// Note: externalJpg will only be set after the fetch completes!
// If you need to use it elsewhere, wait for the async operation to finish.

Key Note for Async Variables #

If you're using the external variable outside a React component, make sure you don't try to use it before the fetch completes. You can wrap it in a promise or use async/await to ensure timing is correct.

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