Angular4项目引用本地磁盘图片（非assets目录）无法显示求助

嘿，我来帮你搞定这个图片加载的问题！首先得说清楚为啥你现在的写法不行——浏览器出于安全策略，会禁止网页直接访问本地磁盘的文件，所以直接写F:\my_Images这种本地绝对路径肯定加载不出来，而且你这个路径看起来还只是个文件夹，不是具体的图片文件路径哦😯。

下面给你几个可行的解决办法，按需选就行：

方案1：配置Angular的资源目录（推荐） #

Angular允许你把本地文件夹映射成项目的静态资源目录，这样就能像访问assets里的文件一样引用它们。Angular4用的是.angular-cli.json配置文件，你可以这么改：

1. 打开项目根目录下的.angular-cli.json
2. 找到apps[0].assets数组，添加本地图片文件夹的配置：

"assets": [
  "assets",
  "favicon.ico",
  {
    "glob": "**/*",
    "input": "F:/my_Images",  // 注意把反斜杠换成正斜杠，或者用双反斜杠F:\\my_Images
    "output": "/my_images/"   // 这是访问时的虚拟路径
  }
]

3. 重启Angular开发服务器（ng serve）
4. 现在你就可以用虚拟路径引用图片了，比如你的图片叫cat.jpg，写法是：

<div class="col-sm-12"> 
  <img src="/my_images/cat.jpg" alt="img"> 
</div>

方案2：搭建本地静态文件服务器 #

如果不想修改Angular配置，可以用一个简单的静态文件服务器来托管本地图片：

1. 先全局安装http-server（需要Node.js环境）：

npm install -g http-server

2. 打开命令行，切换到你的图片文件夹：

cd F:\my_Images

3. 启动服务器，指定端口（比如8080）：

http-server -p 8080

4. 现在在Angular的HTML里用服务器地址引用图片：

<div class="col-sm-12"> 
  <img src="http://localhost:8080/cat.jpg" alt="img"> 
</div>

方案3：临时修改浏览器安全设置（不推荐生产用） #

如果只是开发测试临时用，可以修改浏览器的启动参数绕开安全限制，但这个方法只适合自己本地测试，上线绝对不能用：

比如Chrome浏览器，右键快捷方式→属性→目标栏末尾添加 --allow-file-access-from-files（注意前面有空格），然后重启Chrome，这样就能直接访问本地文件了，但风险很高，不建议常用。

最后再提醒一句：不管用哪个方案，都要确保你写的是具体的图片文件路径，而不是文件夹路径哦！

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