nginx实现访问服务器图片

图片上传至服务器

niginx

在nginx/conf.d下新建.conf文件，内容如下

   server {
        listen       7773;
        server_name  localhost;	
		location /image/ {
		root /var/www/html/Civilized-city-front-end/img;
			autoindex on;
			add_header Access-Control-Allow-Origin *;
			add_header Access-Control-Allow-Headers X-Requested-With;
			add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
		}
    }  

其中7773是监听端口

/image/是匹配路径

root /var/www/html/Cibilized-city-front-end/img是图片在服务器上的路径路径

重新加载nginx配置

保证此时将图片已经传到了上述对应的路径上，进行下一步

访问

正常访问本地图片使用的是

src='./xxx.png'

而之后可以使用http://服务器ip:端口/image/图片名称.后缀来访问

src='http://服务器ip:端口/image/图片名称.后缀'

为了方便更改和配置，建议配置文件抛出对象

const proxy = {
  img:'http://服务器ip:端口/img/'
}
export default proxy

使用时只需要如下形式

src={proxy.img+'图片名称.后缀'}