I'm trying to to something like that :
<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">
The function is :
getIcon(status){
switch (status) {
case 'Ongoing':
return '../../../../assets/img/icon/PinPlot.png';
case 'Signaled':
return '../../../../assets/img/icon/PinWarning.png';
case 'Finished':
default:
return '../../../../assets/img/icon/Pin red.png';
}
}
But all I get is no image like if it's not found. But no error nor warning.
Any idea ?
Use [src]:
<img id="icon" class="cercle icon" [src]="getIcon(item.status)" alt="">
And also you dont need to getIcon({{item.status}}) but without {{}}.
Although the previous answer of using [src] is the way I would recommend, the reason why your existing technique doesn't work is because you're not using interpolation (i.e. {{....}} ) correctly.
You have:
<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt="">
when you probably meant:
<img id="icon" class="cercle icon" src="{{ getIcon(item.status) }}" alt="">
Explanation:
You can think of it this way. Within your template, everything outside {{ }} is treated as literal strings. It's only things within the double braces that are treated as code to execute. So, with your example, because of where you put your braces, you'd end up with the string:
src="getIcon(Ongoing)"
after the interpolation, cuz you're only including the item.status within your braces, instead of the entire expression.
Related
I want to show all images that are in nuxtjs, i used the strorage (Laravel ) to save the files
<img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
The link is as follows
http://localhost:3000/storage/example.jpg
but nothing show
I tested this before, Don't you think the problem could be from the controller?
public function index()
{
$files = scandir(storage_path('app/public/'));
$allFile = array_diff($files, ['.', '..', '.gitignore']);
return response()->json($allFile, 200);
}
The problem here is with the image path you need to specify where your image file exactly is, so you did most of its part like :src="'storage/' + row" but since your actual path to your image is something like http://localhost:8000/storage/example.jpg (the base URL of the Laravel app).
If both Laravel and Nuxt.js app serve under the same port and host
You need a leading slash in your src attribute to make an exact path.
<img v-for="(row, index) in files" :src="'/storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
If they are not serving on the same host and port
You have to declare an individual variable for your base URL, preferably in .env file and then refer to it and prepend it to your image src attribute.
So let's say we gonna define it in .env file, then it should be something like this:
//.env
BASE_URL=http://localhost:8000/
Then we will refer to it in our javascript data method (if that was not exists we will use default value as 'http://localhost:8000/').
data: function() {
return {
baseURL: process.env.BASE_URL || 'http://localhost:8000/ OR http://site.test/'
}
}
And in the last step we will prepend it to our image src attribute just like this:
<img v-for="(row, index) in files" :src="baseURL + 'storage/' + row" :key="index" alt="" width="150px" height="150px" class="img-fluid">
I'm conditionally rendering a div in my React app. This...
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades.</div>
works but I want to include a link in the second option like so
if (props.trades.length > 0)
return <div class="header">Your trades:</div>
else
return <div class="header">You haven't made any trades. Click <a to={{/page}}>here</a> to make a trade.</div>
But I'm getting this error: "Parsing error: Invalid regular expression flag" at the closing a tag.
Why is this?
This happens because you should use the to this way:
Notice: if you are using the html a tag, you would probably want to change to to href
<a to="/page">here</a>
// or
const to = "/page"
...
<a to={to}>here</a>
I would like to show the picture of a user if there is a user in my object list (profileList), and default/error as defaultProfile.png when no user is found ({{item.userProfile}} is null)
I have searched for similar approaches such as
angularjs: ng-src equivalent for background-image:url(…)
and
empty ng-src doesn't update image
My approach to this problem is:
<div ng-repeat="item in profileList">
<div>
<img src='assets/img/defaultProfile.png' data-ng-src="http://example.com/{{item.userProfile}}.jpg" onerror="this.src='assets/img/defaultProfile.png'" />
</div>
<div>
I am able to show error photo however I am still getting error 500,
GET http://example.com/.jpg 500 (INTERNAL SERVER ERROR)
How to avoid getting http://example.com//.jpg?
Thanks a lot
Your current issue is ng-src is still compiled and evaluated to an invalid url when userProfile is undefined.
A simple solution is to use ternary and check for userProfile before deciding with url should be rendered:
<img ng-src="{{ item.userProfile ? 'http://example.com/' + item.userProfile + '.jpg'}} : 'assets/img/defaultProfile.png'" />
It will guarantee that you will always fetch the default image unless item.userProfile is available.
One approach is to use ng-if and ng-hide:
<div ng-repeat="item in profileList">
<div>
<img ng-if="item.userProfile"
data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
<img ng-hide="item.userProfile"
src="assets/img/defaultProfile.png" />
</div>
<div>
When item.userProfile exists, show the ng-src and hide the default otherwise vice versa.
It works.
ng-show
will run no matter {{item.userProfile}} is null or not.
By changing it to
ng-if
Below code is working:
<div ng-repeat="item in profileList">
<div>
<img ng-if="item.userProfile"
data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
<img ng-if="item.userProfile == null"
src="assets/img/defaultProfile.png" />
</div>
note that my profileList is:
$scope.profileList = {userProfile = null}
Thanks a lot
I have a DOM structure like this:
<article class="detail">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
If I select using
immagini = $$('article.detail').getElements('img')
console.log(immagini[0]) // returns Object { 0: <img>, 1: <img>, 2: <img> }
If I select using
immagini = $$('article.detail img')
console.log(immagini[0]) // returns <img src="img1.jpg" />
I can't understand the difference since, as the Docs say:
getElements collects all descendant elements whose tag name matches the tag provided. Returns: (array) An Elements array of all matched Elements.
Thanks for any explanation
When you use $$ you get a array-like collection of article.detail elements. So for each element found getElements will get all img.
This means a mapping of the inicial articles array-like collection you got into arrays of what getElementsfound.
Check this example:
<article class="detail" id="foo">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
<article class="detail" id="bar">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
and the JS/MooTools:
var articles = $$('article.detail')
var img = articles.getElements('img')
console.log(articles, img);
This will print:
[article#foo.detail, article#bar.detail], [Elements.Elements[3], Elements.Elements[3]]
jsFiddle: http://jsfiddle.net/akcvx8gL/
If you want just a array with all img elements you could use the whole selector 'article.detail img' inside $$ like you suggested in your other example or use .flatten() in the end (jsFiddle).
There is a related blog post about this.
"All the methods that MooTools adds to the Element native are added to the Elements class as well. You can do some pretty nifty chaining because of this. This is because any method you call on Elements, will loop through the array and try to call the method on each individual element [...] will return an array of the values from each element.".
insertText is java script that accepts two string paramters
I need to pass two strings
first parameter:
<img src="
second
">
I just cant figure out how to pass double quote as parameter
This works
<a onClick="insertText('<em>', '</em>'); return false;">Italic</a>
This does not
<a onClick="insertText('<img src=/"', '/">'); return false;">Image</a>
Prints '); return false;">Image
You want to use \ rather than /
The escape character for JavaScript is \, not /. So try this:
<a onClick="insertText('<img src=\"', '\">'); return false;">Image</a>
Update:
The solution above doesn't work, because the double-quotes "belong" to the HTML and not to the JavaScript, so we can't escape them in the JavaScript code.
Use this instead:
<a onClick="insertText('<img src=\'', '\'>'); return false;">Image</a> // --> <img src='...'>
or
<a onClick='insertText("<img src=\"", "\">"); return false;'>Image</a> // --> <img src="...">
Since you are using jQuery, why don't you do it the jQuery way?
insertText = function(a, b) {
// your insertText implementation...
};
$('a').click(function() { // use the right selector, $('a') selects all anchor tags
insertText('<img src="', '">');
});
With this solution you can avoid the problems with the quotes.
Here's a working example: http://jsfiddle.net/jcDMN/
The Golden Rule for that is reversing the quotation which means I use the single quotation ' inside the double quotation " and vice versa.
Also, you should use the backslash symbole to espape a special character like ' and ".
For example,
the following commands should work as they apply the rules mentioned above...
<a onClick="insertText('<em>', '</em>'); return false;">Italic</a>
or
<a onClick='insertText("<em>", "</em>"); return false;'>Italic</a>
or
<a onClick="insertText('<img src=\"', '\">'); return false;">Image</a>
or
<a onClick='insertText("<img src=\'", "\'>"); return false;'>Image</a>
I hope this helps you ...
You need to escape it.
<a onClick="insertText('<img src=\"', '\">'); return false;">Image</a>