本地图片上传服务器后不显示问题

Posted 2023-03-28

参考技术A 正常来说设置背景图片都是下面这样的css写法:

但在本地的时候图片还在,上传服务后就不显示.

一开始图片图片放在了assets文件夹下，img和background-image引用都用相对路径，build的时候设置assetsPublicPath: ‘./‘，打包出来后发现background-image的路径出现了问题

blueimp jQuery-File-Upload 上传图片后不显示缩略图

【中文标题】blueimp jQuery-File-Upload 上传图片后不显示缩略图

【英文标题】：blueimp jQuery-File-Upload not displaying thumbnail after uploading the image

【发布时间】：2016-06-12 01:14:42

【问题描述】：

我从here 9.12.1 版下载了最新 插件和依赖项。

我将下载的文件复制到我的 wamp 服务器中并从 localhost/jQuery-File-Upload-9.12.1/index.html 访问它。

选择图片文件后，上传前会显示图片预览。但是一旦上传图像，缩略图就不会显示。

然而，在 Inspect Element 中，缩略图的链接存在于图像 src 中。

文件上传到服务器文件夹并创建缩略图。

图像的名称和大小正在显示。

我做错了什么？

【问题讨论】：

拜托，你能分享缩略图的检查元素链接的路径吗？并请验证路径图像是否存在

@AshokChitroda，我已经编辑了这个问题。

如果我删除 .htaccess 文件，那么它可以工作。为什么会这样？

我也遇到这个问题很久了。当我使用开发人员插件进行检查时..此图像已加载并成功加载到我的目录中。我很有趣 Eclipse IDE 并且已经设置了“访问时刷新”。有人遇到过这个问题吗？

它与 Vaadin 合作。请检查我的完整代码Vaadin with JQuery FileUpload 但是....现在我正在使用 struts2+JSP 进行测试...我得到了与 OP 完全相同的错误。

【参考方案1】：

使用肮脏的技巧进行制作...循环直到图像准备就绪，然后再显示预览图像。 请参阅jQuery: Check if image exists。就我而言，我在图像标签之前使用 ...

            while(urlExists(file.path) != 200) 
                   console.log("still loading image");
            
            <img src="=file.path" >

问题是写图片比响应客户晚了一点。因此，此图像在渲染为 html 后出现 404 错误。但是当我检查时图像实际上是存在的。如上 sn-p ，我试图在服务器成功创建图像后等待加载图像。我知道这不是一个好方法，但它有效。我相信这个错误不会在生产模式下发生，我正在尝试修复在 localhost 上运行。

【参考方案2】：

根据您的问题和 cmets，检查两件事：

首先，下载的缩略图在开发者窗口的网络标签中的状态为 200 或 404。如果它是 200，则问题是另一回事。

如果是 404： 签入您的.htaccess 文件以获取此内容：

RewriteEngine on
RewriteCond %HTTP_REFERER !^$
RewriteCond %HTTP_REFERER !^http://(www\.)?yourdomain.com/.*$ [NC]
RewriteRule \.(gif|jpg|css)$ - [F]

以上行告诉 Apache Web 服务器阻止所有指向 '.gif', '.jpg' 和 '.css' 不是来自域名的文件 'http://www.yourdomain.com/'。在上传您的 .htaccess 文件之前 确保将“yourdomain.com”替换为适当的网站 地址。

查看 .htaccess 中的 url 是否正确设置为您的域（即 localhost）。

参考：http://www.htaccess-guide.com/hot-link-prevention-techniques/