I've written some Vue 3 code which works well in the browser but not in the emulator (for Android or iPhone) or on the actual phones.
The code loops through (v-for) a list of jpegs (1 to 3 currently) and displays the image, like this:
<template>
<div v-for="contact in contactDetails.contacts"
:key="contact.id">
<div><img :src="getImage(contact.id)" class="flex-container" alt="" style="height: 300px"></div>
</div>
</template>
<script setup>
const getImage = (imageData) =>{
return `src/assets/${imageData}.jpeg`
</script>
As I said, the above (slightly truncated code) works on the browser but not on the emulators or the actual phones.
I have looked around on the web but can't find the solution. Guidance will be appreciated.
So ... I fixed it.
The most important thing is that in Quasar your images have to be in, or in a folder under, the public folder.
Getting the path correct was a little bit difficult for me but the console would give clues on where it was looking (where it would give an error message along the lines of GET https://local/host/.../image.jpg or whatever).
I didn't have to do the fancy schmancy inserting a function into the :src URL as above. So my code looks something like this:
<div v-for="contact in contactDetails.contacts"
:key="contact.id">
<div class="linkTitle">{{ contact.service }}</div>
<img class="flex-containter" :src="`/${contact.imageURL}`" style="height:200px"/>
</div>
I faced the same thing.
i had to generate bundles in order test them directly on the phone.
Related
I have made a website, where the logo looks ok when I open it in my laptop browser. However, it doesn't show up in my iPhone or iPad browser. I tried Safari, Chrome, Brave, the same...
this the code in my html file:
<div class="header-logo logo animated" data-animate="fadeInDown" data-delay=".6">
<a href="./" class="logo-link">
<img class="logo-dark" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
<img class="logo-light" src="images/logo-s2-white.png" srcset="images/logo-s2-white2x.png 2x" alt="logo">
</a>
</div>
I have found another stackoverflow questions, the answer says it's because the image size, but I don't think so. My original size is only 1310x242 pixel. and I also tried to reduce the size to only 300x56. It still doesn't show.
Your help is highly appreciated!
okay, I sorted out myself.
It's the srcset, obviously it defines the set of images we will allow the browser to choose between, and what size each image is. So I forgot to update it to the image that I want in srcset.
I have laravel template.blade.php
<div class="classone">
<div class="classtwo">
text
</div>
<div class="classtwo">
text
</div>
</div>
And I would like to display the code to the user as it is. Incluing new line and indents.
I was playing around with {!! !!}, nl2br(view()->render() even Blade::compileString but was unable to find an elegant solution. Everytime I was able to make it work it was difficult to maintain and every small change to the displayed code was laber intense.
I would like to ask for a suggeston how to display more complex html/css/js code to user. I though it will be fairy often topic but was unable to find anything which would help me.
Thank you in advance.
I tried some things out. They may seem a little bit 'hacky' but I think they will suit your purpose. I used a freshly created Laravel 8 application as an example.
<pre>{{ file_get_contents( resource_path('views/welcome.blade.php')) }}</pre>
You can use the Blade facade to compile your blade file to plain php if you want:
<pre>{{ Blade::compileString(file_get_contents( resource_path('views/app.blade.php'))) }}</pre>
I put <pre></pre> tags around the output to show line breaks. It makes the code more readable.
i am working on project using ASP.net Api and angular and i want to build carousal using ng2 bootstrap but i dont know how many images i will? any suggestion how this can be done.
You can check demo with source code http://valor-software.com/ng2-bootstrap/#/carousel
Pay attention how "add slide" button works, this is what you need to replicate
If you have an array of image urls, you can use the angular *ngFor syntax to loop through the images, causing the output to change depending on the array.
TypeScript: let images = ['image1.jpg', 'image2.jpg'];
HTML:
<div class="carousel-wrapper">
<div *ngFor="let image of images">
<image [src]="image" />
</div>
</div>
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I've got a simple AJAX POST form set up in a jQTouch application. We're talking out-of-the-box simple here:
<form id="contact" class="topPage" method="post" action="/process/mobile-submit.cfm">
<!-- Various form guts go here -->
</form>
And this works just great. My users punch in their info, my server-side script does its job and gobbles up the lead data and spits back an out-of-the-box simple response.
<div>
<div class="toolbar">
Back
</div>
<div class="info">
<strong>Thank You For Your Submission</strong><br />
We have received your inquiry, and blah blah blah jibber jabber.
</div>
</div>
Everyone's happy... except those of us who are trying to track the conversion in Google Analytics. Now, I've got virtual pageviews set up on each panel in this application using the pageAnimationEnd event, which is easy as pie when you know what selectors those are going to be attached to in advance, but when jQTouch creates a new segment from the form return, it has a generic serialized ID like #page-N.
I've tried adding a loose script block into the form return. That works fine for Firefox on my desktop, not so much for Safari on my phone.
Since I've allowed jQTouch to handle the AJAX particulars for me in this instance, is there a straightforward way to attach a success handler to it? Or am I better off trying to bind a pageAnimationEnd handler on $('[id^=page-]') and hope the business doesn't want me to do anything else with ad hoc form returns until we replace this app with one written in jQuery Mobile?
Worked it out.
The return fragment can declare its own ID, naturally, and jQTouch will then treat it as though it were an original part of the document. I had previously assumed jQTouch didn't give a toss about what attributes I gave the fragment; I was wrong.
This means that you could goTo it like any other portion of the document. It also means that you can bind a pageAnimationEnd handler on the return fragment either by ID or by class name and it will behave as expected. Thus:
<div class="formResult">
<div class="toolbar">
Back
</div>
<div class="info">
<strong>Thank You For Your Submission</strong><br />
We have received your inquiry, and blah blah blah jibber jabber.
</div>
And:
$('.formReturn').live('pageAnimationEnd', function(evt, info) {
if (info.direction == 'in') {
// Goal completion code
} else {
$(this).remove();
}
});