Angular 7+环境下assets目录图片无法显示问题求助

Alright, let's dig into this issue since you've already checked all the usual Angular config boxes—and your hunch about permissions is probably spot-on. Here's a breakdown of what's happening and how to fix it:

First, Let's Double-Check the Basics (You've Covered These, But Just To Be Thorough) #

You already confirmed the critical stuff:

• Your angular.json has the correct assets configuration (this is the first thing everyone checks, so good call verifying it):

  "assets": [ "src/favicon.ico", "src/assets" ]
  

• Your file path myapp/src/assets/sample.jpg is correct, and your template uses the right relative path: <img width="300" alt="Angular Logo" src="assets/sample.jpg">
• Even freshly created Angular CLI projects have the same problem—this rules out project-specific bugs entirely.

Why System Permissions Are Almost Certainly the Culprit #

When even new projects break the same way, it's a dead giveaway that something at the system level is blocking Angular from accessing or copying your assets. Here's how restricted user permissions mess things up:

1. Development Server Can't Read Assets #

When you run ng serve, the Angular dev server needs to read files from src/assets to serve them to your browser. If your restricted user account doesn't have read permissions for the project folder (or the drive it's stored on), the server can't access those files—hence the 404 error when you try to load http://localhost:4200/assets/sample.jpg.

2. Production Build Can't Write Assets to dist #

During ng build, the CLI copies assets from src/assets to the dist folder. If your user lacks write permissions for the project directory (or the dist folder itself), the CLI can't create the assets subfolder or copy files into it. That's why your production build is missing assets entirely.

Common System Restrictions to Watch For #

• UAC & Protected Folders: If your project is in a system-protected folder like C:\Program Files or C:\Windows, standard user accounts can't read/write there. Moving it to a user-owned folder like C:\Users\<YourName>\Documents or your desktop will fix this.
• Antivirus/Endpoint Tools: Some security software blocks file access for non-admin users, especially when tools like Node.js (which runs Angular CLI) try to read/write files. Temporarily disabling it (carefully!) can help confirm if this is the issue.
• Folder Encryption: If your project folder is encrypted (BitLocker, EFS, etc.), your restricted user might not have the keys to decrypt and access the files.

Step-by-Step Fixes to Try #

1. Move Your Project to a User-Writable Location
   Cut your project folder and paste it into C:\Users\<YourUsername>\Projects or your desktop. Then re-run ng serve or ng build—this bypasses strict system folder permissions entirely.

2. Run Your Terminal/IDE as Administrator
   Right-click your terminal (Command Prompt/PowerShell) or IDE (VS Code, WebStorm) and select "Run as administrator". This gives the Angular CLI elevated permissions to read/write files. Test if assets load correctly after doing this.

3. Manually Adjust Folder Permissions

   • Right-click your project folder → Properties → Security tab.
   • Make sure your user account has Read & Write permissions for the folder and all subfolders.
   • If not, click Edit → Add your user account → Check the boxes for Read, Write, and Modify → Hit Apply.

4. Reinstall Node.js for Your User Account
   Sometimes Node.js (which Angular CLI depends on) has system-wide permission issues. Reinstalling it for your specific user (not "Install for all users") ensures it has access to your local folders.

Quick Permission Test #

Create a simple test.txt file in src/assets, then try to access it via http://localhost:4200/assets/test.txt in your browser. If you get a 404, it's 100% a permission problem—Angular can't even read a basic text file from the assets folder.

内容的提问来源于stack exchange，提问作者Temp O'rary