my view is like this
image1=UserProfile.objects.get(user_id=request.user)
print(image1.user_image)
update_profile = UpdateProfileForm(initial={'first_name':server1.first_name,'last_name':server1.last_name, 'phone_no':server2.phone_no,'Emg_no':server2.Emg_no,'area_code':server2.area_code,'landline_number':server2.landline_number, 'shop_name':server2.shop_name, 'shop_address':server2.shop_address, 'country':server2.country, 'city':server2.city, 'website':server2.website})
variables = RequestContext(request,
{'group':group,'update_profile':update_profile,'timeline_list': timeline_li, 'updatepassword':ChangePasswordForm,'userimage':userimage,'image1':image1})
return render_to_response(
'registration/profile_try.html' , variables,
)
and my html is like this
<div class="uiAvatarXLarge profileHighlightAvatar" >
<img id="user_img" alt="" class="img-rounded" src="{% static '{{image1.user_image}}' %}" style="width:120%;cursor:pointer;">
</div>
but my image not displaying properly. can anybody help me?
You should use {{image1.user_image.url}} in template
Related
So This is correct way to display image in vue
<img class="cur-img" src="~#/assets/img/test.png" alt="temp-img">
However, the following way is incorrect, if templateImg is a string represent by "~#/assets/img/test.png"
<div v-for="(item,index) in items" :key="index">
<img :src="item.templateImg" alt="template-img">
</div>
Is there any way to fix it?
Usually, you will want to import the asset in your JS code. For example:
<template>
<img :src="image" />
</template>
<script>
import testImage from "#/assets/img/test.png"
export default {
image: testImage
}
</script>
Use the following:
<img :src="require(item.templateImg)">
When we are binding src to a variable, it is giving its raw value to the img tag, which means it's expecting a full resource URL. It's up to us to provide a complete data URL to that resource, which means creating a corresponding absolute resource URL out of the relative asset path that we're using.
Thus, we need to fetch it using require(). If you are using an absolute path like a base64 data image URL, or compete image URLs, then in such cases you don't need require(), and your current code will work just fine.
This code works but is there a way to consolidate these two conditions and outputs into one line of code?
<img v-if="pointshover" :src="pointshover" :key="pointshover" class="leaderimg">
<img v-if="!pointshover" :src="leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
Basically if 'pointshover' is null then it grabs the image src from leaderPoints[0].playerimg. If 'pointshover' is not null then it is the src.
Option 1
Then as you want to use only one line, going with the solution proposed by #choasia with a small change.
<img :src="pointshover ? pointshover : leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
You won't need the v-if as this image is shown always, and it will have the pointshover src only when it exists and the leaderPoints[0].playerimg when it doesn't.
Option 2
If you go with the two lines code you probably should use:
<img v-if="pointshover" :src="pointshover" :key="pointshover" class="leaderimg">
<img v-else :src="leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
It's clearer what you want to accomplish if you use an else.
Option 3
You could use a computed property to bind the src.
<img :src="myImageSource" :key="pointshover" class="leaderimg">
myImageSource(){
return this.pointshover ? this.pointshover : this.leaderPoints[0].playerimg;
}
You can use JavaScript expressions in :src.
<img v-if="pointshover" :src="pointshover ? pointshover : leaderPoints[0].playerimg" :key="pointshover" class="leaderimg">
Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html
I want to extract alt value from this code:
<div class="item-right">
<div class="item-company-logo-wrapper">
<div class="item-company-logo">
<img class="centered" src="https://jrdportals.s3.amazonaws.com/6bd8ed9bdba5432c98b1c12a5fada6a8_logo" alt="XYZ Company">
</div>
</div>
<div class="item-buttons">
I use below code but it is extracting full html code but I need only "XYZ Company" (or value in alt)
Case "item-company-logo"
sht.Range("l" & RowCount + 1) = obj.innerHTML
I tried using innerText instead of innerHTML but no value has been extracted. Any help is appreciated!
Change
obj.innerHTML
to
obj.Alt
My HTML looks like this, and I'm working with the YUI library:
<div>
<img class="smallimage" src="host/smallimage.jpg">
</div>
<div>
<img src="host/bigimage.jpg">
</div>
I would like to know how to (1) add a class to the container off all images with the class of .smallimage as well as (2) add a class to the container of all images with the string 'big' in the source tag. :)
So that the output is like this:
<div class = "small">
<img class="smallimage" src="host/smallimage.jpg">
</div>
<div class = "big">
<img src="host/bigimage.jpg">
</div>
Thanks very much fellas!
UPDATE:
Fellas I think I have figured this out now, but would still apprecate if someone could maybe just look if its solid:
1)
YUI().use('node', function(Y)
var node = Y.one(".smallimage")
Y.one(".smallimage").get('parentNode').addClass("small");
});
2)
YUI().use('node', function(Y)
var node = Y.one("img[src*='big']")
Y.one("img[src*='big']").get('parentNode').addClass("big");
});
Thanks!
Your solution is correct, but as the function says using Y.one will affect only one element. If you have multiple images you should use Y.all.
Also, keep in mind that you can do everything inside one YUI().use() call.