I load some images like this in my template:
<img
v-if="idRobot === 7"
src="~#/assets/img/faceTibot.png" />
But I'd like to load the asset dynamically. For example, something like this would be great:
<img
v-if="idRobot === 7"
:src="`~#/assets/img/${dynamicasset}.png`" />
Actually, when I do this, VueJS thinks I want to load the string "~#/assets/img/${dynamicasset}.png".
Is what I want even possible in VueJS3?
Ah, BTW I searched SO and found this but suggested require solutions don't work: https://stackoverflow.com/a/47480286/1098303
Thanks in advance
Have you tried this solution ?
<img :src="require(`~#/assets/img/${dynamicasset}.png`)" />
Related
Little question:
<file-pond
name="customImage"
ref="pond"
label-idle="Déposez votre image ici"
:allow-multiple="false"
accepted-file-types="image/jpeg, image/png"
server="http://localhost:3000'"
:files="custom.customImage"
#init="handleFilePondInit"
/>
Is it possible to dynamically set the server value ?
For example :
v-server="apiUrl+'/api/v1/upload'"
Try this one
:server="`${apiUrl}/api/v1/upload`"
I'm using :server but it can be written as v-bind:server and ES6 Template literals for some better looking interpolation.
Currently trying to add a dynamic url to my background image inside select option. But it seems breaking, not sure how that comes and how to fix this. Looking for different combinations like ` or ' and even ". But really confused.
<select v-model.lazy="countryCode" #change="handleChange" class="select-field height-select-input select-width">
<option v-for="(country, index) in checkCountryName"
:key="index"
:value="country.country_code"
:selected="index === 0"
:data-value="country.city_name"
:style="{backgroundImage: 'url('https://www.countryflags.io/' + {{country.country_code}} + '/flat/64.png')'}"
>
{{ country.country_code }}
</option>
</select>
:style="`backgroundImage: url('https://www.countryflags.io/${country.country_code}/flat/64.png')`"
Is that the exact code you are using? If so, it looks like the issue is within the quotation marks on your url request.
You have
:style="{backgroundImage: 'url('https://www.countryflags.io/{{country.country_code}}/flat/64.png')'}"
Remove the quotes around the url and it should work
:style="{backgroundImage: 'url(https://www.countryflags.io/{{country.country_code}}/flat/64.png)'}"
im trying to use razor to generate a url like this
<img id="currentPic" src="/content/img/#Html.Raw(Model.user.defaultImage).png" />
but the .png bit is being added to the #htmlraw syntax and is not compiling. I know i need to tell the page that #htmlraw is over. I tried using ; which worked - but the ; was also displayed in the string when displayed.
How can i get it so it would display like this. When Model.user.defaultImage = random1
<img id="currentPic" src="/content/img/random1.png" />
thanks
try adding a new set of parenthesis
<img id="currentPic" src="/content/img/#(Html.Raw(Model.user.defaultImage)).png" />
Try #{Html.Raw(Model.user.defaultImage)}
I think you don't need Html.Raw, just use
<img id="currentPic" src="/content/img/#(Model.user.defaultImage).png" />
This feels like a hack, but works:
<img id="currentPic" src="/content/img/#Html.Raw(Model.user.defaultImage + ".png")" />
I am trying to get CAPTCHA working on the eForm plugin. I have added the input form field:
<label for="cfCaptcha">Captcha:<br />
<img src="[+verimageurl+]" alt="verification code"><br />
<input id="vericode" name="vericode" class="text" type="text">
and I have added
&vericode=`1`
to the eForm call.
and have added the Template Variable [+verimageurl+] to my template.
However, when I preview the form all I see in the image area is <img src="" alt="verification code">
Would anyone know what I am doing wrong?
Did you get this fixed?
Check that you ended the label code. Run it through w3c code checker too.
A few times I have left a element un-closed and it breaks the whole thing.
I am trying to make a Google custom search (I just need some sort of search engine on my site), and I need to make it so that I can use my own search box (input field). I need it to be of exact size. I also need to be able to make my own button to search. I am going to need to be able to change the size and background of the search button. I am not completely sure yet, but I might actually need it to be a regular img.
Does anyone know how to do this?
If you cannot do this with Google, do you know of another way to do it?
If there is no other way besides using your own search engine, can I please get a link to a very simplified tutorial on how to make my own. I am willing to put in the extra work to learn, but I tried a bit, and after looking at three different tuts, I gave up because they were very very long and confusing. I hope I was just looking in the wrong places.
Here is the one I am using, you just need to add some styles to <input id='q' which is the search box, and <input value='MyButton' is the button to click
<!-- Google CSE Search Box Begins -->
<center>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="http://myblog">
<input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="width:600px;" name="q" size="75" type="text"/>
<input value="MyButton" name="sa" type="submit"/>
</form>
</center>
....
Edit: Above is my answer from 2010, I cannot confirm it is working or not anymore, but here is the one working.
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXX:YYYYYYYYYYYYYY');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>
For more info: refer to https://developers.google.com/custom-search/docs/js/cselement-devguide
For Googlers who are looking for a solution with new "Overlay Results" option under "Look and Feel" . I used YOU's answer and added some minor hacks to make it work. Basic idea is get the code Google gives you, hide Google's search box and button, and use YOU's answer with the proper XXXXX:YYYY codes. While hiding <gcse:search></gcse:search>" do not use display:none otherwise search results will not work.
<script>
(function() {
var cx = 'XXXXXXXXXX:YYYYYYYYY';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
<div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:none here, it doesn't work-->
<gcse:search></gcse:search>
</div>
<form id="searchbox_XXXXXXXXXX:YYYYYYYYY" action="">
<input value="XXXXXXXXXX:YYYYYYYYY" name="cx" type="hidden"/>
<input value="FORID:11" name="cof" type="hidden"/>
<input id="q" style="" name="q" size="75" type="text"/>
<button class="btn">Search</button>
</form>
ge stackoverflow,
the issue really got me fired-up enough to do a mini walk-through - if you are trying to set up a v2 bar, dealing with the flat spyglass, just want to get the spyglass to work, want to replace the custom bar altogether using v2, finding and locating the styles used and overriding them. Hope it helps! http://t.co/9nvx2l0DeD #eb_p1
long address: http://eburnett.hubpages.com/hub/googlecustomsearchenginev2