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"/>
Related
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
I'm pretty new to Angular so I'm not sure the best practice to do this.
I used angular-cli and ng new some-project to generate a new app.
In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images
In app.component.html (which is the root of my application), I put
<img class="img-responsive" src="assets/images/myimage.png">
When I do ng serve to view my web application, the image does not display.
What is the best practice to load up images in an Angular application?
EDIT: See answer below. My actual image name was using spaces, which Angular did not like. When I removed the spaces in the file name, the image displayed correctly.
In my project I am using the following syntax in my app.component.html:
<img src="/assets/img/1.jpg" alt="image">
or
<img src='http://mruanova.com/img/1.jpg' alt='image'>
use [src] as a template expression when you are binding a property using interpolation:
<img [src]="imagePath" />
is the same as:
<img src={{imagePath}} />
Source: how to bind img src in angular 2 in ngFor?
I fixed it. My actual image file name had spaces in it, and for whatever reason Angular did not like that. When I removed the spaces from my file name, assets/images/myimage.png worked.
Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes.
For example :
'my-image-name.png' should be 'myImageName.png'
'my image name.png' should be 'myImageName.png'
If you put the image in the assets/img folder, then this line of code should work in your templates :
<img alt="My image name" src="./assets/img/myImageName.png">
If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.
Being specific to Angular2 to 5, we can bind image path using property binding as below. Image path is enclosed by the single quotation marks.
Sample example
<img [src]="'assets/img/klogo.png'" alt="image">
Normally "app" is the root of your application -- have you tried app/path/to/assets/img.png?
1 . Add this line on top in component.
declare var require: any
2 . add this line in your component class.
imgname= require("../images/imgname.png");
add this 'imgname' in img src tag on html page.
<img src={{imgname}} alt="">
You can follow the below steps in Angular 8+
Step 1: load the image as below in component
const logo = require('../assets/logo.svg').default as string;
#Component({
selector: 'app-show-image',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {
logo = logo;
constructor() { }
ngOnInit() { }
}
step 2: Add the logic in html file
<img [src]="logo" [alt]="'logo'">
If launched without further configuration, you will see a strange error:
ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i #types/node` and then add `node` to the types field in your tsconfig.
Do as suggested – add the #types/node typings to your project by running npm install #types/node and edit tsconfig.app.json to set:
"compilerOptions": {
"types": ["node"],
...
}
For more info
resource
It is always dependent on where is your html file that refers to the path of the static resource (in this case the image).
Example A:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yourpage.html
As you can see, yourpage.html is one folder away from the root (src folder), for this reason it needs one amount of ../ to go back to the root then you can walk to the image from root:
<img class="img-responsive" src="../assests/images/myimage.png">
Example B:
src
|__assests
|__images
|__myimage.png
|__yourmodule
|__yoursubmodule
|__yourpage.html
Here you have to go u in the tree by 2 folders:
<img class="img-responsive" src="../../assests/images/myimage.png">
for me "I" was capital in "Images". which also angular-cli didn't like. so it is also case sensitive.
Some web servers like IIS don't have problem with that, if angular application is hosted in IIS, case sensitive is not a problem.
Try not give space while loading the images.
Instead of
<img src='assets/img/myimage.png' alt="">
try with string interpolation or Property Binding to load the source image as best practice.
I am attempting to make a photo gallery asp.net MVC website, and part of that involves the setting of the src to a local folder that contains images.
#model MyProj.Models.PhotoIndexViewModel
<div class="row" id="tableSearch">
#foreach (MyProj.Models.VideoModel photo in Model.PImgList)
{
<div class="col-sm-3 thumbnail">
#Html.DisplayFor(model => photo.Title)
<a href=#Url.Action("View", new { id = photo.Id })>
<img class="img-responsive"src="#Url.Content(photo.ThumbNailPrev)" alt=#photo.Id /></a>
#Html.HiddenFor(m => m.searchTerm)
#Html.Partial("_Tags", photo)
</div>
}
</div>
The ThumbNailPrev is "~/Pics/.jpg", which relates to a folder in the main part of the project. The issue is that the image does not appear. When I check the image using inspector is says it isn't found at /Pics/(photoid)/jpg. I don't understand why it is doing this, as my pics and the image itself are present at that location. I have also made sure to include the folder in my project, but it still doesn't seem to find the image.
UPDATE:
I just tried something and confirmed it is something to do with the way I'm calling the path from the database. As if I hard code the EXACT same string as the one in the database it works. The question now is why does that work?
For want of a letter..
I finally determined the problem, and it was a pretty dumb one. In code I am saving a jpEg image, but calling it via jpg. After changing the .jpg to .jpeg in the view everything works... If you are having a similar problem, check and make certain the file extension is correct.
Iam creating an image link in cakephp using html tag, i have a problem with adding src path.
I tried
<a href="#today1" id="lnk3">
<img src="/iserprofiles/app/webroot/img/todaysallocation.png">Todays Allocation</a>
but image is not loaded. if anybody know please reply. i know that we can also create image link using cakephp, but i faced one problem
i u sed this code
<?php echo $this->Html->link($this->Html->image('todaysallocation.png',
array('width' => '200', 'height' => '45')) ,
'#today',array('escape' => false));?>
i dont want to use any controller or action as url, simply i just added '#today',
but my problem is i need to add one id for this. how can we done this????
Check in Your browser patch: localhost/iserprofiles/app/webroot/img/todaysallocation.png
, but i think the problem is in Your .htaccess file, because path to image will look like localhost/iserprofiles/img/todaysallocation.png
I have a mvc 4 project where I am using image references that look like this:
<img alt="Progress Update" class="projectListNotificationIcon" src="#Url.Content("~/Images/progressUpdateIcon.png")"/>
The #Url.Content is necessary for it to work on both the local copy of this project, as well as the live server copy. This works great, however I have another place where I am choosing between 2 different images and tha code looks like this:
var imagePath = (item.IsOverdue) ? "../../Images/lateIcon.png" : "../../Images/onTimeIcon.png";
How can I use some permutation of the #Url.Content in my if statement above? The current way that I am doing it works in the local project, but not on the server.
Try:
<img src="#((item.IsOverdue) ? Url.Content("~/path/img1.jpg") : Url.Content("~/path/img2.jpg"))" alt="whatever" />
Use of the tilde (~) sign is probably the key, as that resolves the url relative to the root of the site.
<img src="#(item.IsOverdue ? "~/path/img1.jpg" : "~/path/img2.jpg")" />
With asp.net mvc 4 urls that begin with the ~ symbol are automatically translated to site relative paths. Read about it here http://www.davidhayden.me/blog/asp.net-mvc-4-the-new-tilde-slash-feature-in-razor-2