The framework I am using is .NET 6.
Previously, the src attribute of the image element like this:
<img src="#ImageServer/images/BG.png" />
The variable of ImageServer stores the URL of the image server.
Recently, I need to add a token in it for anti-theft chain.
I tried it like this:
<img src="#ImageServer/images/BG.png#GetToken()" />
However, after the program is run, the src turns out to be this:
<img src="https://www.aaa.com/images/BG.png#GetToken()" />
What's wrong with my code and how can I render two variables in src attribute? Thank you.
The text just before the # is causing the render engine to not parse the # as a server-side code indicator.
Make the whole value server-side calculated, instead of outputting small pieces of server-side values into client-side values. For example:
<img src="#(ImageServer + "/images/BG.png" + GetToken())" />
This way the view engine sees everything within the #() as a server-side expression and outputs the result of that expression.
Similarly, with string interpolation:
<img src="#($"{ImageServer}/images/BG.png{GetToken()}")" />
Related
If I understand the docs correctly it allows
<div>
<div id="alert"></div>
<button hx-get="/info"
hx-select="#info-details"
hx-swap="outerHTML"
hx-select-oob="#alert">
Get Info!
</button>
</div>
replace the whole <button> due to the hx-swap directive with the content of #info-details - via hx-select="#info-details" - from the response sent.
define a 2nd target hx-select-oob="#alert" which takes the content from #alert from the response sent.
Is there any way hx-select-oob can have multiple targets?
Like hx-select-oob="#alert,#second-target"?
Or how to manage updating multiple targets at once?
If your goal is to return html content and copy the same content to multiple targets - you simply use class selector instead of ID.
If you have multiple content returned, then you need to use htmx-swap-oob
My App.vue has a V-for to create a Card Component, this Card receives the data through a Prop. Everything works fine except for the image.
In my App.vue
<DevJobCard :Job="item" v-for="item in filterSearch" v-bind:key="item.id"/>
The urls that my json provides
"logo": "./assets/logos/scoot.svg",
At the moment the only solution I have found is to put the images in the static folder and use this code so that you can at least see it in production. Help me please :( I haven't made any progress in 2 days
<img v-on="check" :src="'/static' + Job.logo.substring(1)" alt="">
I would like to know how to make it work if they are in assets or in static
If you want to load them by webpack you can simply use :src="require('path/to/file')". Try this code:
<img v-on="check" :src="require('/static' + Job.logo.substring(1))" alt="">
Your project is built, and image paths in the build can change after the build process.
You can try using the require() function. It works at build time:
// v-for="item in yourObject"
<img :src="require('./assets/logos/' + item.logo)" />
This way, webpack will know it needs to change the path to post-build one.
You may want to check this question out: https://stackoverflow.com/a/57350255/1722529
I have a card component which has a structure for an image like this. One image can't be loaded because of (HTTP Status: 403). So I want to replace it with a default one. So I looked it up and learn that I can use #error.
<div class="card-thumbnail">
<img
:src="cardImage"
alt=""
#error="$event.target.src = '~/assets/images/error.jpeg'"
/>
</div>
However this code gives me error that "error.jpeg" can not be found. My folder structure is correct because without #error and a src like this:
src="~/assets/images/error.jpeg"
I can actually see my error.jpeg. So what I am doing wrong here ?
Based on this you need to use require because images inside assets directory are considered as modules :
#error="$event.target.src = require('~/assets/images/error.jpeg')"
Is there any reason why a repeat.for binding would remove attributes from elements inside the repeater?
<div repeat.for="i of model.someArray.length">
<label>Some Array - Index ${i + 1}</label>
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[${i}]"/>
</div>
and that some-custom-attribute is not being output within the repeat, but if I were to remove the string interpolation within there then it outputs fine.
== Edit ==
I have put it in a comment but just to make sure everyone is on the same page, ideally this is the output I expect:
<input value.bind="model.someArray[i]" some-custom-attribute="someArray[0]"/>
The some-custom-attribute is not an aurelia attribute, its pure HTML that a 3rd party JS library uses, so the goal here is to get the textual value of the index into the textual attribute value.
model.someArray.length is a number, not an array. You need to iterate over the array. If you do need the current index, the repeater provides the $index property for you to use.
Your code should look like this:
<div repeat.for="item of model.someArray">
<label>Some Array - Index ${$index + 1}</label>
<input value.bind="item" some-custom-attribute.bind="item"/>
</div>
To answer your original question, doing some-custom-attribute="model.someArray[${i}]" makes Aurelia think you are trying to pass a string value to the custom attribute. You can see that in the following gist: https://gist.run/?id=eed8ac8623ff4749aa5bb93c82a7b1fb I've created a custom element that just pushes whatever value it is given in to an element on the page. Note!!! Don't ever do what I'm doing here! I just did this this way so you wouldn't have to open the js console. To actually get a value passed in, you would need to use some-custom-attribute.bind="item" or (to do things how you are doing things, some-custom-attribute.bind="someArray[i]"
I saw in Expression Engine I can use {embed:title} and {site_name} variables, but now I need a variable to pull an excerpt or description of the article itself. Is there such a variable/tag?
ExpressionEngine tags are based solely on custom fields which you yourself have defined. So in the field group for your "articles" channel, you'll have some fields, maybe {article_summary}, {article_body}, {article_image}, etc. To display your summary, just use {article_summary} in your template.
I'm assuming that you're coming from something like WordPress maybe, where every piece of content has the_content() and the_excerpt() ... aside from a handful of global variables, and some fields which are universal to all entries (like {title}, {entry_date}, etc), ExpressionEngine isn't like that. You define what fields you use for each channel - you have complete control.
Here is the actual code you have to include in your EE template.
{exp:channel:entries channel="article" limit="5" dynamic="no"}
<div class="home_thumb">
<h1>{title}</h1>
<div class="home_thumb_img">
<img src="{article_image}">
{if article_content}
<p>{article_content}</p>
{/if}
</div>
</div>
{/exp:channel:entries}