开发阶段如何从Angular项目外部配置img标签的src路径

Got it, let's figure out how to access that external image in your Angular component. Based on your folder structure (where your Angular project lives in angularprojectroot and the backend images are at ProjectName/backend/assets/images/test.png), here are two solid approaches you can take:

This method tells Angular's build/dev server to include the backend's image directory as part of its assets, so you can reference the images like you would any local Angular asset.

1. Open your Angular project's angularprojectroot/angular.json file
2. Find the assets array under projects -> [your-project-name] -> architect -> build -> options (and also under architect -> serve -> options for dev mode)
3. Add a new entry pointing to your backend's image folder. Since angularprojectroot and backend are both subfolders of ProjectName, the relative path will be ../backend/assets/images:

   "assets": [
     "src/favicon.ico",
     "src/assets",
     {
       "glob": "**/*",
       "input": "../backend/assets/images",
       "output": "/assets/images/"
     }
   ]
   

4. Save the file and restart your Angular dev server (if it's running)
5. Now you can reference the image in your component template like this:

   <img src="/assets/images/test.png" alt="Test Image">
   

Note: This approach copies the backend images into your Angular build output (the dist folder) when you run ng build. If your backend images change frequently, you'll need to rebuild Angular to pick up the updates.

If you want to access the images directly from the backend without copying them into your Angular build, this is the more flexible option.

Step 1: Configure your backend to serve static images #

Let's assume you're using a Node.js/Express backend (adjust based on your actual backend tech):

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

// Serve the backend's images folder at the /images endpoint
app.use('/images', express.static(path.join(__dirname, 'assets/images')));

// ... rest of your backend code

This sets up your backend to serve any file in backend/assets/images when you hit http://[your-backend-url]/images/[filename].

Step 2: Reference the image in Angular #

First, add your backend URL to your Angular environment files (for easy switching between dev/prod):
In angularprojectroot/src/environments/environment.ts:

export const environment = {
  production: false,
  backendBaseUrl: 'http://localhost:3000' // Replace with your backend's dev URL
};

Then in your component template:

<!-- Using property binding -->
<img [src]="environment.backendBaseUrl + '/images/test.png'" alt="Test Image">

<!-- Or using interpolation -->
<img src="{{ environment.backendBaseUrl }}/images/test.png" alt="Test Image">

Important: If your Angular dev server (usually port 4200) is running on a different port than your backend, you'll need to configure CORS on your backend to allow requests from Angular's origin. For Express, you can use the cors npm package:

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:4200' })); // Allow your Angular dev URL

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