一、windows nginx安装
1.1 下载
![在这里插入图片描述](https://img-blog.csdnimg.cn/c393b529c3844504af64db5d42fe301f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
1.2 解压
![在这里插入图片描述](https://img-blog.csdnimg.cn/93a740fd02be45368bda834cfe05140a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
1.3 启动nginx.exe
![在这里插入图片描述](https://img-blog.csdnimg.cn/80630898b79b4f81837cedaa623e2bfb.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
1.4 配置图片的地址
- conf->nginx.conf
![在这里插入图片描述](https://img-blog.csdnimg.cn/47dddd6475994d3295c0ca3d7fa975bd.png)
1.5 访问图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/4c2c624398e14a62abdfde08072777d0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
二、vue访问图片
2.1 vue访问简单图片
- http://localhost/%E5%A3%81%E7%BA%B8/a.jpeg是上面nginx代理的
<input type="image" src="http://localhost/%E5%A3%81%E7%BA%B8/a.jpeg" width="100" height="100"/>
<img src="http://localhost/%E5%A3%81%E7%BA%B8/a.jpeg" width="100" height="100"/>
![在这里插入图片描述](https://img-blog.csdnimg.cn/d525b600c8f94907bab5150beb7f59f5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
2.2 显示txt中的文本及其中的图片
<ul v-for="item in txtContent" :key="item.id">
<li v-html="item.content"></li>
</ul>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20fd26eca6284a838c171c474417b173.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
2.3 保持原txt的文件格式
- <pre></pre>标签保持原文件的文件格式
在content的对象的前后分别加入:<pre>和</pre>
- 效果图如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/fe9fd9c9e13d4a86831d3655f80f0736.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)
2.4 vue前端显示带视频的txt文件
- 直接在txt文件中插入 <video src=“http://127.0.0.1:80/a.mp4” controls=“controls” width=“100” height=“100”>
![在这里插入图片描述](https://img-blog.csdnimg.cn/cfb07e0392c4441091a1ef4eaeb4775b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5Yid5b-D6a2P,size_20,color_FFFFFF,t_70,g_se,x_16)