I'm somehow new in Laravel App development. I'm working on a project and everything is working fine, but in a section I need to display images like a gallery collections of images and I'm accessing images from a hosted server with a stored image link in Database table.
There is a problem in displaying images some of the images are displaying and some of them are not displaying when I'm refreshing the page this time some other images are not displaying and some of them do. I think there may be problem on how I'm accessing images from database or may be client side scripting languages.
Images are not completely loaded from server and the image field displays only a not found image icon instead of image. With each refresh of page (re loading the page) some new images are finding the same problem and some of previous images which are not displayed before this time displaying properly . I wonder why this happens? please somebody help me.
Note: Project hosted in a production server.
This is the rout value of images when I'm accessing them.
Route::get('productimage/{file_name}', function($filename){ $path =
storage_path('app').'/productimage/'.$filename; $image =
File::get($path); $mime = File::mimeType($path); return
Response::make($image, 200)->header('Content-Type', $mime); });
this is how I'm accessing images in views
<img src="{{asset('productimage/'.$row->image)}}" class="img-class"/>
this is a screen shoot from images in view
this is a screen shoot of images after page refreshed
Related
I'm trying a figure out how I can hide an image's url when looking at the console or source code.
I've seen others asking about this to prevent users from downloading the images, but this is not the problem - in fact they should be able to download/save the images.
The real reason is because my users are uploading images on my website, to a third-party storage service like cloudinary. I don't want the users to know where the images are going, because I'm afraid they could manipulate the data sent or received. This is just an additional security measure, even after checking that the images sent/received are indeed image urls and not malicious code or anything.
What do you recommend for hiding the urls in the console? I'm completely out of ideas on where to start.
To elaborate a bit: The user clicks 'browse for files' on my website, then clicks 'upload'. The files get transferred to cloudinary for storage. My website then fetches the image url(s) from cloudinary, stores the url in my database, and displays them in div boxes on the user's profile. Something like this:
<div class="listing_img" style="background-image:url('.$img_url.');"></div>
Where $img_url is a row from the database.
Sort of like an image-storage website, but not exactly, people won't come to my website for storing images.
Users won't at any stage get to see which API url their images are being sent to, unless of course they see the 'img src=akdklasdjakl' inside the browser console.
I'm not sure if this is the correct approach, but it doesn't seem like a bad idea.
You can try using a data-uri to add the image data rather than the image url - as you would for inline images. So, in CSS you could try:
style="background:url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKu..... etc) no-repeat;"
As example:
This uses a remote image but you can use local filepaths - even those outwith document root.
$source='http://jumanjipets.co.uk/wp-content/uploads/2018/02/koi.jpg';
$contents=file_get_contents( $source );
printf( "<img src='data:image/jpeg;base64, %s' />", base64_encode( $contents ) );
Another way is to serve the images by your own server.
Just stick to a convention of eg. image IDs to convert them back to the original image URL.
The user gets a page with <img src="/img-1.jpg">.
Redirect the url starting with "^/img" to a script to retrieve the image on your server and return the image from there.
RewriteRule ^/img-(\d+) convert-img-id-to-url.php?id=$1 [L]
The user can't see the original source. Only you can link the image ID to the source.
Have an odd project I'm working on. Using only HTML, CSS, and Javascript/Jquery, I have a form running inside a bootstrap Modal with a file upload.
The upload needs to be saved to a certain folder on the Hard Drive, and then pulled in for display inside a div.
I need help in assigning the image to a variable and having the src work regardless of filename.
There can be no server side techniques used, as this is for a raspberry pi that will not be connected to the internet.
My photo gallery site has thousands of html pages, most of them are only with large photos. That is when clicking small thumb, opens a new window with large photos.
This large view html pages has no navigations. I want to add 'home' and 'back to artist' navigation in these html pages.
www.mysite.tld/gallery/artist/name/event/(here stored large images and its html pages)
this same structure goes for other artist names too.
I am using dreamweaver templates. In template, to go back folder, I added..
Back to Main
..(here artist main folder)/(artist index).html
but when saving this template as html to different folder, this "../index.html" changes to "../../../index.html" which goes to main website index page :/
I can simply type ../index.html in one page but the site has many artist folders with same structure.
so how to direct/link to artist page from its sub-folder html pages. Using javascript or any scripts?
Really sorry for this big message. Please dont down-vote because of my stupid question. Thank You.
EDIT :
I tried History back() Method but that's not working because if users come from search engine, there's no history to go back to main artist page.
In simple. You click a page from google and in that landed page (large image here), you need a navigation to visit the main gallery page with other images in small thumbs or to say event gallery page (which present in up-directory in my site). So to navigate to main gallery page, I am stuck here for "how to". May be I need to do in php or something :/
One way of resolving this is to use absolute paths instead of relative paths. Absolute paths start with /.
I'd suggest adding Dreamweaver as a tag to your question, to get the attention of Dreamweaver users who may recognise your situation and can help.
I'm trying to add images to my hello world app (HTML / JavaScript).
I am able to add the standard images (logo.png, smalllogo.png etc), but adding:
<img src="images/testImg.png"> won't show, when testing the app.
The image is located in the images folder, but won't show. What's wrong here?
Apparently the image needs to be added by clicking "add->existing item->image". Then it gets loaded and will be available in the app.
I have a plugin called Skitter fo WP..its a slideshow jQuery plugin.
For some reason im getting
Error loading images. One or more images were not found.
I recently transfered my website from one host to another..copying all the files. now its not working, needless to say it worked before the transfer..no files were changed in any manner what so ever..only wp-config file for db etc'..
I tried the solution offered here -
https://github.com/thiagosf/SkitterSlideshow/issues/7
But it didn't worked..
The wp settings of the plugin are the same as they were with my images attached to the plugin.
The website is
www.tranceil.fm
Any thoughts?
A quick thought gone through my mind: The error was just happened when you transfer your website. Let me explain.
I believe you uploaded the slider images using WordPress Image Uploader. So your image's address will be like this: www.youroldsite.com/wp-content/wp-uploads/2012/08/slider1.jpg
When you transfer your website to another domain, WordPress will not update these locations. So simply when the plugin checks for above address, it is unavailable.
Solution:
You need to change the slider image's URL manually or
Delete all slides and Re-upload the images again on your new host.