Is it possible with Laravel Blade templating to write a statement like this?
If alt image field exists in database, add. If not, leave out. What is happening with the code below is the double quotes alt="text" get rendered.
<img src="#" {{$product->extra_img1_alt ? 'alt="'. $product->extra_img1_alt .'"' : ''}}>
My dear friend, you just need to change the code
<img src="#" alt=" #if($product->extra_img1_alt) {{$product->extra_img1_alt}} #endif ">
Text in {{ tags are escaped automatically, so you need something more like this:
<img src="#"
#if($product->extra_img1_alt)
alt="{{ $product->extra_img1_alt }}"
#endif
>
That said, while you seem to be trying to avoid it, there's nothing really wrong with an empty alt attribute:
<img src="#" alt="{{ $product->extra_img1_alt }}">
Related
Actually I've this :
<img src="/images/lang/{{Config::get('languages')[App::getLocale()]['flag-icon']}}_flag.jpg" class="lang-flag" alt="">
But I wan't to link this with the storage :
Example :
{{ Storage::url('images/user.svg') }}
I would have thought of doing this, but it obviously doesn't work, and I don't know how to do "double interpolation", there must be a simple way to do it but I'm stupidly stuck on it:
<img src="{{ Storage::url('images/lang/{{Config::get('languages')[App::getLocale()]['flag-icon']}}_flag.jpg') }}" class="lang-flag" alt="">
thanks in advance
Anything within {{ }} is PHP code so you can use simple string concatenation:
<img src="{{ Storage::url('images/lang/'.Config::get('languages')[App::getLocale()]['flag-icon'].'_flag.jpg') }}" class="lang-flag" alt="">
Hello and thank you for taking the time to help me with my question. I have a task application which is working great. When you upload images, you can see their thumbnails and even click on them and be directed to a new tab to view the images at 100%. The problem is that when a client uploads a pdf, the icon shows up as a broken image icon. This makes sense as the img tag within the a tag obviously is an image icon.
My question is how can I indicate in my show.blade.php that it is an image when it is an image and a pdf or dox when it is a pdf or doc? Like I said, the app is working so the only code I am concerned with is the following (unless I am mistaken, please let me know):
...
<a data-toggle="" href="/storage/upload/{{ $images[$i]['name'] }}" target="_blank">
<img src="/storage/upload/{{ $images[$i]['name'] }}" class="image-fluid w-50">
</a>
</div>
#endfor
#else
<p class="ml-3 mb-1">No files found</p>
#endif
</div>
I am looking for something like a conditional that says: If img, display the thumb, if not, display an icon that represents "file".
Any help on this would be greatly appreciated. Thank you in advance.
You can simply use a free API to achieve this without writing any code. Use the below link to get your icon as per the extension.
<img src="https://pro.alchemdigital.com/api/extension-image/pdf">
For futher info read this article: Read this Article
To get this to work I changed my above code to the following:
#if (in_array($extension = pathinfo($images[$i]['name'], PATHINFO_EXTENSION), ['jpg', 'png', 'bmp']))
<a data-toggle="" href="/storage/upload/{{ $images[$i]['name'] }}" target="_blank">
<img src="/storage/upload/{{ $images[$i]['name'] }}" class="image-fluid w-50">
</a>
#else
<a data-toggle="" href="/storage/upload/{{ $images[$i]['name'] }}" target="_blank">
<img src="{{ "/icons/{$extension}.jpg" }}" class="image-fluid w-50">
</a>
#endif
</div>
#endfor
#else
<p class="ml-3 mb-1">No images found</p>
#endif
</div>
I then added an icons folder and populated it with the icon images in jpg format. I hope this helps anyone else with the same issue.
I am trying to display images with VueJS, but it either prints {{ activity.image }} or shows a compilation error. These are the attempts:
<img :src="'{{ activity.image }}'"> // Displays {{ activity.image }}
<img :src="{{ activity.image }}"> // Error
<img :src="'#{{ activity.image }}'"> // Displays #{{ activity.image }}
<img v-bind="src:'{{ activity.image }}'" alt=""> // Error
<img v-attr="src:'{{ activity.image }}'" alt=""> // Error
<img :src={{ activity.image }} alt=""> // Error
How do I do it?
I assume activity.image is coming from the JavaScript, since you're using the dot notation.
You can use v-bind:src="activity.image", yes, without the mustache.
or if it came from PHP, you should be using the -> operator.
v-bind:src="{{ $activity->image }}", you need those mustache for the Blade rendering, however you don't need the mustache for the Vue.
Try like this
<img :src="'/images/'+item.images" alt="image" />
Try like this:
Note: img is in public folder
<templete>
<img :src="getImage()" class="card-img-top" alt="" />
</templete>
<script>
export default {
methods:{
getImage(){
return 'img/images.jpg';
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
You can directly point to the image:
<img src="/images/logo.png">
Maybe someone has similiar problems. I use Vue2, with Vuetify2 and Laravel as my Backend. I tried to first show my image within my Blade file and afterwards with the right path in my Vue component to solve this problem. This worked for me:
Inside my blade file
<img src="{{ asset('images/aaa.jpg') }}">
Vue Component
<img src="images/aaa.jpg">
I tried various approaches with dynamic binding and so forth but this finally worked.
try to add '/' before the link
Inside blade file:
<img src="{{ asset($table->img) }}">
Vue Component:
<img :src="'/' + table.img">
What I am trying to do is link to an image that has the same name as the {{ $player->id }} value that is associated with the image and the current player profile being viewed. Here is the code I am trying to run:
<img src={{asset('player_images/{{ $player->id }}.png')}} alt="{{ $player->fn }}" height="250" width="250">
I get this error:
ErrorException in 3df6d770fcb0ad814f71ee3a4e14a69779b15332.php line 5:
Parse error: syntax error, unexpected '}', expecting ',' or ')'
I have also tried this,
<img src='/public/player_images/{{ $player->id }}.png') alt="{{ $player->fn }}" height="250" width="250">
but the image will not load. I do though get the alt as the player first name, so I know that I can pass data this way, but how do I do it for the source of an image? I realize the first set of code most likely is failing because of the {{}} embedded within the {{}}, but I don't understand why the second method doesn't work. Any help on why this isn't working or how I could accomplish another way would be greatly appreciated.
Try this-
<img src={{asset('player_images/'.$player->id.'.png')}} alt="{{ $player->fn }}" height="250" width="250">
This is proper way to use
<img src="{{asset('player_images').'/'.$player->id.'.png'}}" alt="{{ $player->fn }}" height="250" width="250">
Note : In Blade {{ $player->id.'.png' }} is equivalent to <?php echo $player->id.'.png' ?>
I am trying to link to a user profile image in Laravels blade template but I am only getting errors here.
This is my image tag containing the link:
<img class="img-circle dashboardprofileimage" src="{{ URL::asset('img/profile_pictures/users/{{ Auth::user()->profile_picture }}') }}"/>
I would be very happy if anyone could help me out here. I guess its a simple thing but I have tried quite a lot of times now.
Thanks.
Your error is using nested {{ }}, you just need it once. Check out the correct code below:
<img
class="img-circle dashboardprofileimage"
src="{{
URL::asset('img/profile_pictures/users/' . Auth::user()->profile_picture)
}}" />
Note: it's splited into several lines for better legibility.
you just use {{ }} one time to print URL::asset() and Auth::user()
<img class="img-circle dashboardprofileimage" src="{{ URL::asset('img/profile_pictures/users/'.Auth::user()->profile_picture) }}"/>