So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.
<div ng-repeat="results in userInfo.images">
<figure class="img">
<img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
</figure>
</div>
I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.
My project has the following structure:
Repositry Name
app
css
home
home.module.js
home.tpl.html
images
profilePicture.png
js
resources
app.js
index.html
Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.
I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.
I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?
Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.
Change your <img data-ng-source declaration to just use ng-src:
<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
More details at w3schools: ng-src
Related
So there is a folder named "images" in Public.
The funny thing is it was working fine until I uploaded it on github pages, and then when I refreshed, it just broke. The images don't load either on the github pages or on local anymore.
<img src= "images/equilibrium.jpg" alt="equilibrium background" />
Just add / at the beginning of source url.
<img src="/images/equilibrium.jpg" alt="equilibrium background" />
I have a portfolio site deployed at github pages and I used jekyll to create it. The issues that I have : 1)The responsive design at mobile it's not right and I also can't see footer, 2) I have broken images that doesn't load i have changed the path several times but still doesn't work i guess I'm out of options?Any suggestions to fix these issues? My site : https://lazospap.github.io/LazPap/ and my repo : https://github.com/LazosPap/LazPap .
To make sure that the image urls are found, you can tell Jekyll where the image is before processing using the link tag. Jekyll will track the link of the image before and after processing, so you can rely on your repo's current structure instead of the structure after processing.
<img src="{% link images/CSS_3.png %}" class="background-image-right"/>
Docs on link tag
Another tip is to create a .gitignore, add the following files to the .gitignore and then delete them from being tracked by git. You don't need them in your source control.
// .gitignore
.jekyll-cache
_site/
When I run your repo locally and make the browser mobile responsive, the images are not shrinking down. But, I can see your footer. I'm not familiar with the framekworks you're using, though.
Instead of using link, you can also do this:
<img src="{{ '/images/CSS_3.png' | prepend: site.baseurl }}" class="background-image-right"/>
I have a react app with this project structure:
In my Home component and About component I have two images
With src set to :
<img src="/img/charlie1.jpg" alt="charlie home pic" />
and <img src="/img/charlie2.jpg" alt="charlie about pic" />
So I assume it will start looking in the root folder then the image folder then find the pictures in there.
This works fine when I’m developing on my local machine
The images will display correctly.
But when I build it and move the files to prod the images won’t work
It looks for the image at this path: https://xyz.github.io/img/charlie2.jpg instead of https://xyz.github.io/charlieReact/img/charlie2.jpg
How can I fix this problem?
If I change the image src to : <img src="./img/charlie1.jpg" alt="charlie home pic" />
Then it works in github pages, but then the images won’t display when I’m on my local machine…
It's a good idea to import the images into the JavaScript and use the imported variable whenever you can, and the URLs will just work by themselves.
import charlie1 from './charlie1.jpg';
<img src={charlie1} />
If your page has a root other than / and you have assets in the public directory, you most likely have to do some extra logic in the code.
package.json
{
"homepage": "https://xyz.github.io/charlieReact"
}
App.js
<img src={`${process.env.PUBLIC_URL}/img/charlie1.jpg`} />
I have an Angular app which I am serving from Play.
The main routes within Play all serve some HTML pages which contain ng-include statements to some angular templates which are in a "templates" folder in public...
<div ng-include="'#routes.Assets.versioned("templates/test.html")'"></div>
This works fine as I can use Play to reference the assets as normal. Now when the page loads in the browser, each of these templates load and in turn try to pull in further angular templates...
<div ng-include="'templates/test2.html'"></div>
But this results in a 404 as the "templates" folder cannot be resolved.
How can I have a truly public "templates" folder with Play where each of angular can pull in whatever templates it needs in the browser?
Thanks
You will need something like this in your PLAY routes file:
GET /templates/*file controllers.Assets.at(path="/public/templates", file)
In this link you can see the whole solution
I am using angularJS for implementation. I have created a directory structure for my application so that html pages and js will be identified. I have created a header.html which contains only header part of my application. I am including the header.html by using ng-inlcude in my dashboard page which is on root, in this header.html page I am using some image tags like src="theme/img/logo/my_logo.png".
When I am trying to use the header.html in some of other HTML page which is in directory structure I am not able to get the image on the src in header.html. So to get the image I need to use src="../theme/img/logo/my_logo.png".
Can anyone please give me the solution how I can to use relative or context path for image so that the header.html can work for root pages as well for the pages which are in directory structure.
Thanking You.
Sachin Warke.
Set a base url with
<base href="<path here>">
if you don't want to use absolute urls.