I want to display an image in view file.
I tried several lines of code.
This is a part of my controller
$filename = time().'.'.$request->logo->extension();
$partner->logo = $request->logo->storeAs(
'partnerLogos',
$filename,
'public'
);
I linked storage folder.
The file is saved in : storage/app/public/partnerLogos/1665127813.jpg
In My view file, I tried 4 different ways to display the image, it only works when I put the file name.
<img src="{{ asset('storage/partnerLogos/'.$partner->logo) }}" alt="">
Result : http://localhost:8000/storage/partnerLogos
{{ asset('storage/partnerLogos/'.$partner->logo) }}
Result : /partnerLogos/1665127813.jpg
<?php print_r($partner->logo); ?>
Result : partnerLogos/1665127813.jpg
<img src="{{asset('storage/partnerLogos/1665127813.jpg')}}" alt="">
Result : image is displayed
If you are storing the images in storage directory, consider that you will not access them via a direct address, since It is not stored in public directory!
You should add images in storage/app/public directory and after that run
php artisan storage:link
It creates symbol link, so the images will be accessible by asset.
for more information check this example
Related
I tried to display to html changeable profile image with admin. can someone explain please
models in Portfolio app :
class ProfileImage(models.Model):
profile = models.ImageField(("Profile image"), upload_to=None, height_field=None, width_field=None, max_length=None)
this is base html in template folder (i tried this one) :
<img src="{{ portfolio.models.ProfileImage.progile.url }}" alt="profile"><br />
You should first configure your model to store profile pictures. Your ProfileImage model looks correct, but you need to specify where the images should be uploaded using the upload_to argument of ImageField.
Include the model in your admin form by using a ModelForm or manually adding it to the admin's fields list.
In your HTML template, you can display the image using the url attribute of your template's ImageField object.
You have an error in your HTML above, it should be profile.url and not portfolio.models.ProfileImage.profile.url:
<img src="{{ profile.image.url }}" alt="profile">
When I upload a product from Angular side, It Post the product with imagepath, and the image is getting stored in the NestJs folder also, but I can not display product with it's image. The product is displaying at frontend but without it's image that is referenced and saved at the backend.
Anguar FrontEnd Code .ts
export class BooksComponent implements OnInit {
BookForm = new FormGroup({
_id: new FormControl(''),
name: new FormControl(''),
author: new FormControl(''),
price: new FormControl(''),
genres_name: new FormControl(''),
coverimage: new FormControl(''),
});
results?: Book[] = [];
searchedText: string = '';
constructor(
private readonly apiService: ApiService,
private router: Router
) {}
ngOnInit() {
this.apiService.getallbooks().subscribe((data) => {
this.results = data;
console.log(this.results);
});
}
Frontend html code.I'm getting all the information but not the image, here I'm providing src in img tag to display images
<div class="grid" *ngFor="let result of results">
<div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
<img
class="image"
src="http://localhost:3000/{{ result.coverimage }}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>
This is the information of the Product that is coming from the backend
And when I try like this src="{{result.coverimage}}" or [src]="result.coverimage" I got error localhost:4200/assets/imagename not found(404). well that is obvoius!. because there is not such path, 4200 is for Angular. but I'm uploading the images at the backend assets folder which is located at localhost:3000/assets/, and we always upload files to backend for dynamic approach from database
In your highlighted part of your post you ask how to display the image, i.e you suspect the problem is in the frontend. However there is a missing part from the provided context. In the line where the html magic happens (The img tag src attribute).
There you are string interpolating a property called coverimage under the results object. We do not see what is inside the coverimage from your backend response in the frontend screenshot. If it is an id of a document then it will not be parsed correctly. The src attribute accepts:
APNG, AVIF, GIF, JPEG, PNG, SVG, and WebP. Or base64 (which seems not the case here).
When you have the image with one of the acceptable supported formats as stated in MDN correct you can map the property to the src attribute either via
1- string interpolation:
<img src="{{imagePath}}" />
2- property binding:
<img [src]="imagePath" />
The second way is more popular, but both work fine.
PS: it is a best practice and accessibility recommended to populate the alt="" property
If you are struggling to display the images coming from server, like I was, or you are struggling with the data that is coming NestJs. Then this might work for you as it worked for me.
So in my case I had a list of books and each book has path for its image. I was using ngFor and set the image src with the path. That is the right way. But the images were not visible and Network was showing images as text/html type. The actual issue here was not the type,the actual issue was in my URL.I had a folder in NestJs server by the name of assets,that is preset at root, and I had set the path for the images(in NestJs file upload code), like this ./assets/. That is also the correct way to set the destination folder.I was able to see the images at browser like this http://localhost:3000/imagename.png,and that means my server configured to server/serve my images over root URL that's why I can access them http://localhost:3000/imagename.png. But my api was returning images in a format that contains ./assets/ in the URL.
So with the following code
<div *ngIf="result.coverimage">
<img
class="image"
src="http://localhost:3000/{{ result.coverimage }}"
alt=""
height="400px"
width="250px"
style="border: 1px solid red"
/>
</div>
I am assuming that I'm hitting the Url like this http:localhost:3000/imagename.png. But actually Angular was seeing the URL like this http:localhost:3000/./assets/imagename.png. And this is note the correct URL Format. Urls don't work with . or ,.Also becasue my server is configured at root, this urlhttp;//localhost:3000/assets/imagename.png is also wrong.And root means that, whatever the thing is set at root, that is directly access able after your server's port number. Example http://localhost:YourServerPortNumber/TheThing_Set_at_Root.
So the solution for this issue is the following
src="http://localhost:3000/{{
result.coverimage.replace('./assets/', '')
}}"
With above .replace('./assets/', '') we are removing the ./assets/ and repalcing it with '' empty space. So now URL is in this formathttp://localhost:3000/imagename.png.
I need to add additional images next to post title, in this case decided to use ACF and add fields (image) into another plugin (Event Schedule). After I added fields in ACF I was trying to add some code from ACF documention however it doesnt work..
P.S. Every post will have different images based on their type. You can choose it while you are editing specific post.
In ACF field menu I chose to return format Image Array.
Tried with all return formats: Image Array, Image URL and Image ID. As I understand plugin cant find the variable acf_name and the image source is left blank.
<div class="wcs-class__meta">
<div class="wcs-class__inner-flex">
<h3 class="wcs-class__title" :title="event.title" v-html="event.title"></h3>
// Using this code from official ACF documentation
<?php
$acf_name= get_field('acf_name');
if( !empty($acf_name) ): ?>
<img src="<?php echo $acf_name['url']; ?>" alt="<?php echo $acf_name['alt']; ?>" />
<?php endif; ?>
</div>
</div>
Now nothing happens, no errors, nothing. However, also it doesnt show those images I want.
Files in the plugins folder do not have access to global functions like get_field();. You can overwrite most plugin files in your theme, in which you should have access to global functions. Keep in mind that when the plugin you override gets updated, the file your are overriding will not. This could cause security issues.
The following article talks about the right ways of custmizing plugins: https://iandunn.name/2014/01/10/the-right-way-to-customize-a-wordpress-plugin/
I can refrence a pic like this
But i dont want to save user data images in the website path,so i try to locate test.jpg in
/home/www/userdata/username/test.jpg
but just cant ref it's abs path ,when showing on html the pic not displayed,it's like this:
<img src="/home/www/userdata/username/test.jpg"/>
i muset point out that ,i dont want store user datas inside webroot,neither want i store it in database.
In this case,webroot and userdata are at same dir : /home/www/(www serves as an username)
Do i need wirte and image server so i can ref image by http?
Any suggest is appretiated~
where is your HTML Page is located ?
If located in www then you can use like following :
<img src="userdata/username/test.jpg"/>
Otherwise remove "/" before home:
<img src="home/www/userdata/username/test.jpg"/>
I'm working on laravel php framework , I've a simple question ,
While using blade template engine , I normally use html helper functions
to render forms , links or whatever so .
Now when i try to put a link to specific route , i usually to like that :
{{ HTML::link_to_route('author','TheAuthor')) }}
First parameter takes the route , and the second one takes the string that will appear ,
To make it simpler that code will produce :
TheAuthor
Now I want to replace TheAuthor with an image ,
What can i do ?
Or you can use {{route}}
Ex:
<img src="'.$image.'" />
I know this is not the answer you want to hear - but you cannot pass any image via link_to_route.
The problem is the output from the HTML class is escaped automatically. So if you try to pass this:
{{ HTML::link_to_route('author','<img src="'.URL::base().'assets/images/image.jpg" alt="icon" />')) }}
it comes out like this:
<img src="http://laravel3.dev/assets/images/image.jpg" alt="icon" />
which will just be text on the screen - no image. Instead you need to use URI::to_route('author') and generate the link yourself. So make a helper a like this (not tested):
function link_to_route_image($route, $image)
{
$m = '<a href="'.URL::to_route($route).'">'
. '<img>'.$image.'</img>'
. '</a>';
return $m;
}
It may become tedious if you are doing this all over the place, but in isolated spots the best way to handle this would actually be to wrap your entire link_to_* method call in HTML::decode.
{{ HTML::decode(HTML::link_to_route('author','<img src="{URL::base()}assets/images/image.jpg" alt="icon" />')) }}
There's nothing you can do from the inside of the function (such as wrapping the "title" portion in decode) because the cleaning is happening within the function call, but if you decode the entire link it will render the html properly.