So what im trying to do is query a Minecraft server with javascript, and with the response i get back with the api, i want to grab the .playerlist and put the response in this url (https://cravatar.eu/avatar/ {name} /100.png) for each person connected
If someone knows a better way to achieve this, i would very much appreciate your input!
Im also pretty new to javascript, so not fully know what im doing :/
Heres the HTML that i have (i know it may be messy, its also not fully my code)
<div class="card"> <div class="icon"><img src="https://cdn.worldvectorlogo.com/logos/minecraft-1.svg"></div><div class="header">
<div class="image"> <img src="https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/u/n/t/untitled-a5150.jpg" alt="" /> </div>
<h2>Server Status</h2>
</div>
<div id="rest">Loading...</div>
<img src="https://cravatar.eu/avatar/" $face "/>
</div>
And here is the javascript
//Query api at this address
var url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON(url, function(r) {
//data is the JSON string
if(r.error){
$('#rest').html('Server Offline.');
return false;
}
var p1 = '';
if(r.Players > 0 ){ p1 = '<br>'+r.Playerlist; }
// Text to display below
$('#rest').html('Total Online: '+r.Players+p1);
// Trying to add playerlist to html url
$('#face').html+p1;
});
Since you've pasted jQuery code, I'll submit my answer in jQuery. However, I do recommend you learn primitive JavaScript and not focus your attention just on jQuery... it's become something of a meme on StackOverflow.
Starting off, you really should be wrapping your code in $(document).ready this'll only run the code when the page has loaded.
$(document).ready(() => {
// The document is ready, let's run some code!
});
Then add your AJAX request as normal inside this bracket.
$(document).ready(() => {
let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON(url, response => {
});
});
Okay, whilst writing this, I checked the URL provided by OP and saw that it was timing out so I've grabbed a sample response from the Minetools' documentation.
{
"MaxPlayers": 200,
"Motd": "A Minecraft Server",
"Playerlist": [
"Connor",
"Kamil",
"David"
],
"Players": 3,
"Plugins": [],
"Software": "CraftBukkit on Bukkit 1.8.8-R0.2-SNAPSHOT",
"Version": "1.8.8",
"status": "OK"
}
So in your JSON response, you can see that Playerlist is a array which can contain multiple things in one variable. You can also iterate through an array, which is what we'll be doing to build the image URLs.
We iterate through an array using forEach.
$(document).ready(() => {
let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON(url, response => {
response.Playerlist.forEach(playerName => {
console.log(playerName);
});
});
});
//Console:
//Connor
//Kamil
//David
Now that we're iterating through the player list we can start assembling the URLs for these images and adding them to your document's body.
I've cleaned up your HTML, take note of the new div#user-images I've added. This'll be the place where jQuery will add your images from the forEach loop.
<div class="card">
<div class="icon">
<img src="https://cdn.worldvectorlogo.com/logos/minecraft-1.svg">
</div>
<div class="header">
<div class="image">
<img src="https://res.cloudinary.com/lmn/image/upload/e_sharpen:100/f_auto,fl_lossy,q_auto/v1/gameskinnyc/u/n/t/untitled-a5150.jpg" alt="" />
</div>
<h2>Server Status</h2>
</div>
<!-- This div tag will need to hide when there is no error, or say when there is. -->
<div id="rest">Loading...</div>
<!-- The user images will be added inside this div. -->
<div id="user-images"></div>
</div>
Now we have our HTML ready we can start using the jQuery function appendTo to add elements into our div#user-images.
$(document).ready(() => {
let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON(url, response => {
response.Playerlist.forEach(playerName => {
$(`<img src="https://cravatar.eu/avatar/${playerName}" />`).appendTo("#user-images");
});
});
});
Your div#user-images should start filling up with the images of players from the Playerlist array.
I noticed you added a simple way of showing whether or not there's an error with the API. We can interact with div#rest to show/hide or change text depending on the success of the response.
$(document).ready(() => {
let url = "https://api.minetools.eu/query/play.aydaacraft.online/25565";
$.getJSON(url, response => {
if(response.error){
$("#rest").html("The server is offline!");
}else{
//There is no error, hide the div#rest
$("#rest").hide();
response.Playerlist.forEach(playerName => {
$(`<img src="https://cravatar.eu/avatar/${playerName}" />`).appendTo("#user-images");
});
}
});
});
And that's it really. I hope this gives you some understanding of arrays, and iterating through them, as well as some DOM functions from jQuery.
I use axios to get data from the api, now I need to display the image in the td tag in HTML, the text response are working fine but the image is not displaying.
my request code is:
componentDidMount(){
var headers = {
"Content-Type":"application/json",
"AccessToken":localStorage.TOKEN,
}
axios.get(window.$_APIurl+"myProviders/5e463d53e7179a2f011c4104", {headers: headers})
.then((response) => {
console.log(response.data[0].provider.image);
const doctor = response.data[0].provider.image;
if(response.data.length > 0) this.setState({"listOfProviders": response.data});
})
}
My html to use is:
{this.state.listOfProviders.length > 0 ?
<tbody>
{this.state.listOfProviders.map((providerData,indx)=>
<tr>
<td className="font-weight-medium"> <img className="logo" src={doctor} alt="pam-logo" /> {providerData.provider.firstName} {providerData.provider.lastName} </td>
<td>{providerData.provider.email}</td>
<td>{providerData.provider.phoneNumber}</td>
<td>{(providerData.provider.specialities)}</td>
<td > {providerData.provider.qbid}</td>
<td> Mountain view,Ave </td>
<td><Icon icon={editIcon} width="20px"/> <Icon icon={deleteIcon} width="20px"/></td>
</tr>
)}
</tbody>
I need image in src tag.
I guess doctor vairable scoping problem. As you are declaring this const doctor = response.data[0].provider.image; in componentDidMount but you are accessing from another place.
I don't know the use case here. But in my opinion, the variable declared in the componentDidMount() is not accessible in the render method. Just declare that variable as class variable in the constructor and then you can use it using this.doctor.
Or instead of declaring the variable you can just read it's value from the iterator. Like, providerData.provider.image
create a state variable in constructor
this.state = {
doctor: ''
}
after geting response update the image url using setState inside componentDidMount
this.setState({doctor: response.data[0].provider.image})
I have a case where in my Vue.js with webpack web app, I need to display dynamic images. I want to show img where file name of images are stored in a variable. That variable is a computed property which is returning a Vuex store variable, which is being populated asynchronously on beforeMount.
<div class="col-lg-2" v-for="pic in pics">
<img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>
However it works perfectly when I just do:
<img src="../assets/dog.png" alt="dog">
My case is similar to this fiddle, but here it works with img URL, but in mine with actual file paths, it does not work.
What should be correct way to do it?
I got this working by following code
getImgUrl(pet) {
var images = require.context('../assets/', false, /\.png$/)
return images('./' + pet + ".png")
}
and in HTML:
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
But not sure why my earlier approach did not work.
Here is a shorthand that webpack will use so you don't have to use require.context.
HTML:
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
Vue Method:
getImgUrl(pic) {
return require('../assets/'+pic)
}
And I find that the first 2 paragraphs in here explain why this works? well.
Please note that it's a good idea to put your pet pictures inside a subdirectory, instead of lobbing it in with all your other image assets. Like so: ./assets/pets/
You can try the require function. like this:
<img :src="require(`#/xxx/${name}.png`)" alt class="icon" />
The # symbol points to the src directory.
source: Vue URL transfrom rules
There is another way of doing it by adding your image files to public folder instead of assets and access those as static images.
<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >
This is where you need to put your static images:
Your best bet is to just use a simple method to build the correct string for the image at the given index:
methods: {
getPic(index) {
return '../assets/' + this.pics[index] + '.png';
}
}
then do the following inside your v-for:
<div class="col-lg-2" v-for="(pic, index) in pics">
<img :src="getPic(index)" v-bind:alt="pic">
</div>
Here's the JSFiddle (obviously the images don't show, so I've put the image src next to the image):
https://jsfiddle.net/q2rzssxr/
Vue.js uses vue-loader, a loader for WebPack which is set up to rewrite/convert paths at compile time, in order to allow you to not worry about static paths that would differ between deployments (local, dev, one hosting platform or the other), by allowing you to use relative local filesystem paths. It also adds other benefits like asset caching and versioning (you can probably see this by checking the actual src URL being generated).
So having a src that would normally be handled by vue-loader/WebPack set to a dynamic expression, evaluated at runtime, will circumvent this mechanism and the dynamic URL generated will be invalid in the context of the actual deployment (unless it's fully qualified, that's an exception).
If instead, you would use a require function call in the dynamic expression, vue-loader/WebPack will see it and apply the usual magic.
For example, this wouldn't work:
<img alt="Logo" :src="logo" />
computed: {
logo() {
return this.colorMode === 'dark'
? './assets/logo-dark.png'
: './assets/logo-white.png';
}
}
While this would work:
<img alt="Logo" :src="logo" />
computed: {
logo() {
return this.colorMode === 'dark'
? require('./assets/logo-dark.png')
: require('./assets/logo-white.png');
}
}
I just found out about this myself. Took me an hour but... you live, you learn, right? 😊
I also hit this problem and it seems that both most upvoted answers work but there is a tiny problem, webpack throws an error into browser console (Error: Cannot find module './undefined' at webpackContextResolve) which is not very nice.
So I've solved it a bit differently. The whole problem with variable inside require statement is that require statement is executed during bundling and variable inside that statement appears only during app execution in browser. So webpack sees required image as undefined either way, as during compilation that variable doesn't exist.
What I did is place random image into require statement and hiding that image in css, so nobody sees it.
// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />
//js
data() {
return {
userAvatar: require('#/assets/avatar1.svg'),
hidden: true
}
}
//css
.hidden {display: none}
Image comes as part of information from database via Vuex and is mapped to component as a computed
computed: {
user() {
return this.$store.state.auth.user;
}
}
So once this information is available I swap initial image to the real one
watch: {
user(userData) {
this.userAvatar = require(`#/assets/${userData.avatar}`);
this.hidden = false;
}
}
Here is Very simple answer. :D
<div class="col-lg-2" v-for="pic in pics">
<img :src="`../assets/${pic}.png`" :alt="pic">
</div>
<img src="../assets/graph_selected.svg"/>
The static path is resolved by Webpack as a module dependency through loader.
But for dynamic path you need to use require to resolve the path. You can then switch between images using a boolean variable & ternary expression.
<img :src="this.graph ? require( `../assets/graph_selected.svg`)
: require( `../assets/graph_unselected.svg`) " alt="">
And of course toggle the value of the boolean through some event handler.
<div
v-for="(data, i) in statistics"
:key="i"
class="d-flex align-items-center"
>
<img :src="require('#/assets/images/'+ data.title + '.svg')" />
<div class="ml-2 flex-column d-flex">
<h4 class="text-left mb-0">{{ data.count }}</h4>
<small class="text-muted text-left mt-0">{{ data.title }}</small>
</div>
</div>
You can use try catch block to help with not found images
getProductImage(id) {
var images = require.context('#/assets/', false, /\.jpg$/)
let productImage = ''
try {
productImage = images(`./product${id}.jpg`)
} catch (error) {
productImage = images(`./no_image.jpg`)
}
return productImage
},
I also faced this problem.
Try it:
computed {
getImage () {
return require(`../assets/images/${imageName}.jpg`) // the module request
}
}
Here is a good article that clarifies this:
https://blog.lichter.io/posts/dynamic-images-vue-nuxt/
Tried all of the answers here but what worked for me on Vue2 is like this.
<div class="col-lg-2" v-for="pic in pics">
<img :src="require(`../assets/${pic.imagePath}.png`)" :alt="pic.picName">
</div>
As I am using Gridsome, this way worked for me.
**I also used toLowerCase() method
<img
:src="
require(`#/assets/images/flags/${tournamentData.address.country_name.toLowerCase()}.svg`)
"
/>
well the best and easiest way that worked for me was this of which i was fetching data from an API..
methods: {
getPic(index) {
return this.data_response.user_Image_path + index;
}
}
the getPic method takes one parameter which is the name of the file and it returns the absolute path of the file maybe from your server with the file name simple...
here is an example of a component where i used this:
<template>
<div class="view-post">
<div class="container">
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
<small id="helpId" class="form-text user-search text-muted">search for a user here</small>
</div>
<table class="table table-striped ">
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
<th>photo</th>
</tr>
</thead>
<tbody>
<tr v-bind:key="user_data_get.id" v-for="user_data_get in data_response.data">
<td scope="row">{{ user_data_get.username }}</td>
<td>{{ user_data_get.email }}</td>
<td>{{ user_data_get.userage }}</td>
<td><img :src="getPic(user_data_get.image)" clas="img_resize" style="height:50px;width:50px;"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'view',
components: {
},
props:["url"],
data() {
return {
data_response:"",
image_path:"",
}
},
methods: {
getPic(index) {
return this.data_response.user_Image_path + index;
}
},
created() {
const res_data = axios({
method: 'post',
url: this.url.link+"/view",
headers:{
'Authorization': this.url.headers.Authorization,
'content-type':this.url.headers.type,
}
})
.then((response)=> {
//handle success
this.data_response = response.data;
this.image_path = this.data_response.user_Image_path;
console.log(this.data_response.data)
})
.catch(function (response) {
//handle error
console.log(response);
});
},
}
</script>
<style scoped>
</style>
I encountered the same problem.
This worked for me by changing '../assets/' to './assets/'.
<img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">
The image needs to be transcribed.
What worked for me is putting the images in public folder. i.e public/assets/img
Dynamic Image Tag:
<div v-for="datum in data">
<img
class="package_image"
style="max-width:200px;"
alt="Vue logo"
:src="`./assets/img/${datum.image}`"
>
<div>
I have a solution you may want to try.
Define a method like below
methods: {
getFlagImage(flag){
return new URL('/resources/img/flags/'+flag+'.png', import.meta.url);
},
}
then images can be called with the established for loop
<li :class=" 'nav-item', {'active': language === key} " v-for="(value,
key) in locals" :key="value ">
<a class="dropdown-item" #click="switchLanguageTo(key)">
<img :src="getFlagImage(key)" /> {{value}}
</a>
</li>
I think I found the best solution to this problem by accident!
The only thing you have to do is to start addressing from the root.
Doesn't work
<img :src="'../assets/' + pic + '.png">
Work:
<img :src="'src/assets/' + pic + '.png">
As of today, working with VUE 3 + Typescript & composition API, what I have done is wrap require function in try catch to handle crash.
computed: {
getImage() {
let imgSrc = "";
try {
imgSrc = require(`../assets/weather-widget-icons/ww-icon-${this.weatherForecast.main.toLowerCase()}.svg`);
} catch (error) {
console.error(`Image '../assets/weather-widget-icons/ww-icon-${this.weatherForecast.main.toLowerCase()}.svg' not found!`);
}
return imgSrc;
}
}
and call this function in image tag:
<div class="weather-icon">
<img :src="getImage" :alt="weatherForecast.main" />
</div>
I have a controller function which is called on double click of an item in an ng repeat:
$scope.likeUpdate = function(update) {
$http.post( $rootScope.apiURL + 'likeupdate', {
update_id : update.data.id,
user_id : $rootScope.currentUser.id
}).success(function(result, response){
update.data.does_like = result[0][0].does_like;
console.log(result[0][0].does_like);
});
}
This, should to me, change on my Ionic app and update on the screen the 'does_like' value.
However, it doesn't.
Here is my ng repeat:
<div ng-repeat="update in updates" class="custom-card">
<div ng-show="{{update.image}}" class="image">
<img on-double-tap="likeUpdate({{update.data.id}})" class="full-image" ng-src="https://s3-eu-west-1.amazonaws.com/images/{{update.image.name}}" imageonload>
</div>
{{ update.data.does_like }}
</div>
On page load, the update.data.does_like correctly shows what I need, and after page refresh will show what It should. But in my code its not updating live on the success callback.
The console log shows the correct output.
P.S I know doing result[0][0] isn't good, shall be working on structure soon.
In order for likeUpdate to change the data.does_like property of the update in question, you should pass the update to it instead of whatever {{update.data.id}} resolves to, ie
<img on-double-tap="likeUpdate(update)" ...
While we're making changes, you should remove the deprecated success method
$scope.likeUpdate = function(update) {
$http.post($rootScope.apiURL + 'likeupdate', {
update_id : update.data.id,
user_id : $rootScope.currentUser.id
}).then(function(response) {
update.data.does_like = response.data[0][0].does_like;
});
};
update is a local variable to the function.
try
$scope.updates = result[0];
But your structure looks off.
I am using hide and show to display different href links on ng-repeat depending if the userid exists on routeParams. The image inside the href tag is the same for both conditions.
For example:
<div ng-repeat="trip in trips">
// If userid exists, the user is authenticated so provide userid on url
<a ng-show="userid" ng-href="#/trip/{{trip.tripid}}/user/{{userid}}">
// Same exact image as in ng-hide
<img ng-src="trip.jpg" width="200" height="200" alt="Trip Photo">
</a>
// If userid does not exist, the user is not authenticated so no userid on url
<a ng-hide="userid" ng-href="#/trip/{{trip.tripid}}/">
// Same exact image as in ng-show
<img ng-src="trip.jpg" width="200" height="200" alt="Trip Photo">
</a>
</div>
I feel there is a less redundant way to avoid using ng-show and ng-hide just to change the URL and writing duplicate image tags inside the anchor tag.
You could use a filter and pass the data, as such:
filter('urlFormatter', function() {
return function(tripid, userId) {
if(angular.isDefined(userId)) {
return "#/trip/"+tripid+"/user/"+userId;
}
return "#/trip/"+tripid+"/";
}
});
Then use it in your attribute as:
ng-href="trip.tripid | urlFormatter:userid"
Or
ng-href="trip.tripid | urlFormatter"
You can also use the $location service and change your path:
$location.path('/path/foo/bar')
With this method, you would bind an ng-click to the tag and apply the location logic within the controller, that is, if the userid is passed.
An example:
<a ng-click="goSomewhere(trip.tripid, userid)">
Where the controller would be
controller('demoCtrl', ['$scope', '$location', function($scope, $location) {
$scope.goSomewhere = function(tripid, userid) {
if(angular.isDefined(userid) {
$location.path("/trip/"+tripid+"/user/"+userid);
}
else {
$location.path("/trip/"+tripid+"/");
}
}
}]);