【nginx】nginx 无法加载css/js/gif/png等图片等文件

最新推荐文章于 2024-07-28 03:33:02 发布

xiueer

最新推荐文章于 2024-07-28 03:33:02 发布

阅读量1w

点赞数

分类专栏：错误解决文章标签： nginx

本文链接：https://blog.csdn.net/taoxiuxia/article/details/78938674

版权

错误解决专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在安装WordPress后，页面能够正常访问，但是页面样式非常难看，F12发现css、js还有图片资源都没有加载出来，显示net::ERR_ABORTED

初步判断是nginx的问题。

解决方法为：在配置文件nginx.conf中加入如下配置项：

location ~ .*\.(js|css|png|jpg|gif)$ 
{   
    root /home/xiaxt_web/wordpress; #站点根目录
    if (-f $request_filename) {
        expires 1d;
        break;
    }
}

重启nginx

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiueer

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

教你如何通过nginx对资源文件（图片，视频，js文件,压缩包等等）进行缓存，缓存时间设置

我的ID：sumer-work（全网同名）昵称：程序员SUMER（全网同名）

05-26

518

教你如何通过nginx对资源文件（图片，视频，js文件,压缩包等等）进行缓存，缓存时间设置！本篇文章主要介绍了如何在 nginx 中缓存静态文件配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Nginx进阶篇/Nginx服务器基础配置实例/Nginx服务操作的问题/Nginx静态资源部署

略

07-11

经过刚才的分析，"tcp_nopush"和”tcp_nodelay“看起来是"互斥的"，那么为什么要将这两个值都打开，这个大家需要知道的是在linux2.5.9以后的版本中两者是可以兼容的，三个指令都开启的好处是，sendfile可以开启高效的文件传输模式，tcp_nopush开启可以确保在发送到客户端之前数据包已经充分“填满”，这大大减少了网络开销，并加快了文件发送的速度。经过上述内容的优化，我们再次思考一个问题，假如在满足上述优化的前提下，我们传送一个1M的数据和一个10M的数据那个效率高?

1 条评论您还未登录，请先登录后发表或查看评论

nginx 部署 vue 项目找不到js css文件的解决方法

01-11

很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需

nginx搭建图片服务器访问不到图片的几个原因

weixin_42740540的博客

06-21

1万+

Nginx作为图片服务器。图片上传到指定目录，目录在nginx的路径下。访问图片。可以上传但访问不了。分析原因：是否location匹配根路径未配置。匹配的路径是否为alias 虚拟路径，root 真实路径如主机地址 131.21.141.122 端口为 9090 Location /image { Alias /opt/image/; ...

nginx Java图片加载不出来

最新发布

weixin_37087164的博客

07-28

Nginx Java图片加载不出来的解决方案作为一名经验丰富的开发者，我将向你介绍如何解决“nginx Java图片加载不出来”的问题。这个问题可能涉及到多个方面，包括Nginx配置、Java应用服务器配置、以及图片资源的存储和访问方式。在这篇文章中，我将详细解释整个流程，并提供相应的代码示例。问题解决流程首先，让我...

Nginx访问不了网站的css jpg等等资源

m0_74374651的博客

02-02

316

..location /# deny all;...

使用Nginx服务测试页面，图片无法加载出来

weixin_56667320的博客

06-28

3706

在我使用测试端windows加载页面时，发现文字可以加载出来，但是图片无法加载以下是排错思路通过域名发现可以加载出来文字但是加载不出来图片，那么我可以确定文字没有问题，问题在图片上首先文件的格式是否正常，看我服务端html目录下是否有图片，若确定在，再去nginx的配置文件中查看是否支持我上传图片的格式，所以我会去/usr/local/nginx/conf/nginx.conf，添加我上传图片的格式，然后去我的测试端浏览器中清空缓存再次测试查看缓冲区内存是否过小，是否我上传的图片过大，是否需要

nginx不显示图片

weixin_42429288的1博客

01-17

4359

如图：打开nginx的 localhost:80/tes/samples/ 页面发现一些图片可以显示，一些显示不了，原因没有在nginx中配置图片rewrite 解决修改conf文件，下面是核心部分代码 listen80; // localhost:80 server_namelocalhost; #Fo...

linux网页显示不了图片,搭建Nginx图片服务器浏览器不显示图片问题

weixin_34749183的博客

05-14

910

一、安装Nginx先安装Nginx，看我之前发的文章：搭建Nginx服务器二、安装vsftpd再安装vsftpd组件，看我之前发的文章： Linux安装ftp组件(8步完成)三、开始搭建Nginx图片服务器1、效果例如：图片通过ftp服务上传到/home/ftpuser/www/images目录下，我想通过访问Nginx服务器来访问ftp目录下的图片文件，该url为http://192.168....

docker下nginx配置压缩字体和图片等配置

01-11

Docker中的Nginx服务器作为一个流行的反向代理和负载均衡器，可以通过配置实现对字体、图片等静态资源的GZIP压缩。本文将详细介绍如何在Docker环境下配置Nginx以实现这一功能，主要涉及`docker-compose.yml`、`nginx...

nginx反向代理转发后页面中的js css文件无法加载

陌小白的博客

06-05

2097

故障现象：nginx做代理转发后，发现页面上的js css文件无法加载，页面样式乱了。原因：没有配置静态资源解决js css文件无法加载无法访问的问题解决办法：修改配置文件nginx.conf，在server字段中添加黄色标注部分 server { listen 80; server_name test.com; #charset koi8-r; access_log logs/opc.access.log m.

Apache伪静态，Nginx重定向与相对路径(css js image等)

YiCheng_L的博客

11-28

3844

Apache .htaccess 伪静态在Apache配置完httpd.conf文件， <Directory> AllowOverride None 改为 AllowOverride All </Directory> 并开启 mod_rewrite.so模块去掉改行注释：" LoadModule rewrite_module modules/mod_re...

阿里云中nginx无法访问图片

qq_40820382的博客

02-20

660

我遇到的问题如下：上图是本地的springboot的application.properties配置文件和本地nginx配置。当访问http://localhost:8087/images时，等同于访问F:\afei_code1\imgs，所以当访问本地F:\afei_code1\imgs路径下名为1493370993的文件夹下图片 property-07.jpg时，直接访问http:/...

ngixn 配置可以访问html 但是图片无法访问

weixin_40046130的博客

09-09

1155

打开nginx.conf 配置文件第一行加入 user root; 在80端口中配置 server { listen 80; server_name ldods.com; location / { root /var/www; #静态文件（png jpeg jpg ）的目录 index test.html; } } 如果还不行 chmod -R...

解决nginx无法显示图片的问题

热门推荐

angel_tor的专栏

07-14

1万+

在nginx配置文件里加上这句 location ~.*\.(jpg|jepg|gif|css|png|ico|html)?$ { root /Users/liuxq/Sites; expires 30d; break; }重新启动后，就ok啦。

Nginx 环境下php web服务解决多接口和找不到js,css文件问题

MMMOIC的博客

01-08

1000

近期涉及到nginx 下搭建php服务，遇到了一些问题，以此记录。

解决nginx动静分离无法加载图片及格式文件问题

04-08

891

1、在nginx配置文件中添加以下代码，将图片及格式文件也跳转到对应服务器 location ~ .* { proxy_pass http://apache_server; } 2、也可将nginx根目录中添加与动态网页相同的文件（测试过程中未完全解决该问题） ...

Nginx——图片配置png格式乱码解决

专注写bug

03-31

1936

nginx配置项 [root@VM-0-13-centos conf.d]# cat sm-image.conf server { listen 443 ssl; listen [::]:443 ssl; # your url # If there are more than one, separate them with spaces server_name 二级域名; # your ssl certificate file r

解决nginx设置反向代理后，css|js|gif|jpg|jpeg|png|bmp|swf等静态资源无法加载

Honiler的博客

05-06

1万+

问题分析打开浏览器开发者工具（F12），加载部署的网页内容，查看Console标签的报错信息，发现静态资源文件的加载地址存在问题，这个问题是设置反向代理后，无法获取正确的资源文件地址导致的。解决办法 nginx配置修改：配置静态文件的映射 server { listen 80; server_name www.xxx.com; ...

nginx vue 不加载css

09-10

当 Nginx 用作静态资源服务器时，可能遇到 Vue 项目中 CSS 不加载的问题。通常，这是由于 Nginx 配置不正确或缺少必要的配置所导致的。首先，我们需要确保在 Nginx 中正确配置了静态资源的路径。可以在 Nginx 的配置文件中设置指向 Vue 项目的根目录，并设置正确的 location 规则来处理静态文件，如下所示： ``` server { ... root /path/to/vue-project; location / { try_files $uri $uri/ /index.html; } location ~* \.(css|js|gif|jpeg|jpg|png|svg|woff|woff2|ttf|eot|ico)$ { expires 1y; add_header Cache-Control "public"; } ... } ``` 上述配置中，我们使用 `root` 指令指定 Vue 项目的根目录，通过 `location /` 将所有的请求都交给 `index.html` 处理，以便 Vue Router 可以正确处理前端路由。而对于静态文件，我们使用 `location ~* \.(css|js|...)` 正则匹配并添加相应的缓存和响应头。在配置完成后，重新加载 Nginx 使配置生效。此时，在浏览器中访问 Vue 项目，应该能够正确加载 CSS 文件。但如果仍然不能加载 CSS 文件，还需要检查 CSS 文件路径是否正确，并确保文件的读取权限设置正确。可以通过查看浏览器控制台的网络请求，以及 Nginx 的错误日志来进一步排查问题。综上所述，要解决 Nginx 中 Vue 项目加载 CSS 文件的问题，需要配置正确的静态资源路径和相应的 location 规则，确保文件的读取权限正确，并及时排查报错的日志以便定位问题所在。