I cant seem to get the image to show up. How exactly would I write this to get it in my html from my controller using angular.js? I am using a ui-router also
The title shows up, but not the image.
Controller:
angular
.module('app')
.controller('aboutCtrl', ['$scope', function($scope){
$scope.title = "About",
$scope.image = "images/myimage.jpg";
}]);
HTML:
<h3 class="center">{{title}}</h3>
<figure class="image">
<img ng-src="{{image}}" >
</figure>
I think you haven't passed reference of controller. try this.
<div ng-app="app" ng-controller="aboutCtrl">
<h3 class="center">{{title}}</h3>
<figure class="image">
<img ng-src="{{image}}" >
</figure>
<div>
Related
I have this simple react component that gets data from an API (fetch called in UseEffect), and displays it using HTML. When I refresh the page, all html disappears from the page and it goes blank. What's peculiar is that when I instead make some changes in the code editor and let react autoupdate the page after saving, it displays everything just fine.
Here's the code snippet for the component:
export function AgentCard(props){
console.log("agentcard function");
const [agentData,setAgentData] = useState({});
useEffect(()=> {
console.log('running useEffect')
axios.get('https://valorant-api.com/v1/agents/').then(res=>{
var agentRes;
for (const agent of res.data['data']){
if (agent['displayName'] === props.agentName){ agentRes = agent}
}
setAgentData(agentRes);
console.log(agentData)
})
},[])
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
<div className='AbilitiesBar'>
<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
</div>
</div>
</div>
)
After some digging and logging, what I found is that when I refresh the page, the state (agentData), is saved to this:
https://imgur.com/a/QzfIdpm
and get the following error in the console:
https://imgur.com/a/H7gLiTQ
But once I make any change to the editor and let react autorefresh, the logs show that the state agentData has the right data object pulled from the API.
Also, this only happens when I have the following part of the code running
<img src={agentData['abilities'][0]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][1]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][2]['displayIcon']} className='AbilitiesIcon'></img>
<img src={agentData['abilities'][3]['displayIcon']} className='AbilitiesIcon'></img>
Once I comment this out, everything displays correctly even after a browser refresh
I know the way I've posed the question is confusing, but I'm new to front end development and don't really know what I'm supposed to look for here.
Probably because agentData.abilities returns undefined (remember that you have an empty object that is asynchronously populated), but you're trying to access it in your template as if an array is present.
You can solve this easily if you conditionally render those <img> elements when agentData.abilities is not undefined, i.e.:
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
{agentData.abilities && (
<div className='AbilitiesBar'>
<img src={agentData.abilities[0].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[1].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[2].displayIcon} className='AbilitiesIcon' />
<img src={agentData.abilities[3].displayIcon} className='AbilitiesIcon' />
</div>
)}
</div>
</div>
)
Even better: you can simply iterate through the first 4 entries in agentData.abilities to keep your DOM a bit simpler:
return(
<div className='AgentCard'>
<h2>{agentData['displayName']}</h2>
<img src={agentData['displayIcon']}></img>
<div className='AgentCardBody'>
<div className='AbilitiesBar'>
{agentData.abilities && agentData.abilities.slice(0,4).forEach(ability => (
<img src={ability.displayIcon} className='AbilitiesIcon' />
)}
</div>
</div>
</div>
)
I'm making a website and for some reason the images are not showing up on the browser. The ALT TEXT is appearing correctly but the images are not. Images have been placed in public/images...
The code is as:
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public\images\untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
try to use forward slash for image path instead of back slash
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public/images/untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
More examples: >>>
developer.mozilla.org/en-US/docs/Web/HTML/Element/img
w3schools.com/html/html_filepaths.asp
You need to set static folder path first for the express app in order to access static files using ejs or html. Here we will consider public folder as a static folder for our app.
Just copy the below line to the entrypoint of your app & then replace "./public" with your public folder path.
app.use(express.static("./public"));
Complete Example Code
const express = require("express");
const app = express();
app.use(express.static("./public"));
app.get("/", (req,res) => {
return res.send("welcome")
})
/* Start Server */
app.listen(5000, () => {
logger.info(`Success, service running on port 5000.`);
})
Also,
<img src="public\images\untitled.png" alt="an image"> will be replaced with <img src="/images/untitled.png" alt="an image">
I want to use NG-ZORRO-andt pagination in the Html page, it's showing in my browser but how do I link the data from the api with the pagination?
This is my Html code
<div class="col-md-6 col-lg-4 col-xl-3" *ngFor="let course of peopleHome"> //I want to paginate this data
<div class="card-blog">
<a href="#">
<img src="../assets/images/image10.jpg" alt="" class="img-blog" />
</a>
<div class="card">
<a href="#">
<h4 class="title-blog">{{course.people_title}}</h4>
</a>
</div>
</div>
</div>
<nz-pagination [nzPageIndex]="1" [nzTotal]="peopleHome.length" [nzPageSize]="10"> </nz-pagination>
</div>
So please how can i link my response to nz-pagination?
You are using nz-pagination without any work with your array. How an array should understand that you want to get a part of it? There is two option to paginate your array:
Use nz-table
Use (nzPageIndexChange) and (nzPageSizeChange) methods of nz-pagination to filter your array
Ok, I'll try to explain as best I can.
Here is my code:
HTML:
<div class="mobile-wrapper">
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
</div>
JS:
const handleClose = (elem) => {
console.log(elem);
elem.style.display = "none";
};
So, currently the handclose function currently hides the element, in this case it closes the image that has onclick="handleClose(this). What I need, is that when I click that image, it closes the mobile class instead of closing that image. So I am unsure how to reference the mobile class whilst still using this.
I have to use this as I have been asked too. Because I have the same HTML as above but for different images, as the JavaScript functions will doing the same thing for the above HTML as well as the different images I have. For example: My handleclose function will be using different elements but doing the same thing, hence why I am using this. So I would appreciate some help with this, and not to be told to do it a different way ie getelementbyid as that's not what I need.
Also, how would I be able to use elem.parentElement in this function, where popUp should be elem.parentElement
document.addEventListener("visibilitychange", () => {
if (!cookieExists()) {
popUp.style.visibility = "visible";
// popUp.style.top = "10vh";
document.cookie = `${cookieName}=true;max-age=604800;SameSite=None; Secure`;
}
});
You can refer to the parent element using .parentElement:
const handleClose = (elem) => {
elem.parentElement.style.display = "none";
};
<div class="mobile-wrapper">
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
<div id="mobile" class="mobile">
<img src="assets/images/mobile-moments-away-img.png">
<img id="mobile-close-btn" class="mobile-close-btn" src="assets/images/mobile-close-button-img.png" onclick="handleClose(this)">
<img id="mobile-continue-btn" class="mobile-continue-btn" src="assets/images/mobile-continue-now-img.png">
</div>
</div>
How to display all the images in the form of grid, which all will come from back end, so the images are in the dynamic form. and I have to put Description as well on those images, and those Description are also coming from Back End in AngularJS?
If image data is coming in array then you can show image using ng-repeat directive.
Controller
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageList = allImage;
});
HTML
<div class="col-md-3" ng-repeat="image in imageList track by $index">
<img src="{{image.imageUrl}}" />
<label> {{image.description}} </label>
</div>
You can use ng-repeat for showing you image with description like:
<li class="col-sm-3" ng-repeat="product in productList">
<img src={{product.imageUrl}} />
<label>{{product.description}}</label>
</li>
Here is the documentation