I want to display an image where its source is an external link. This is working in a browser but not working in Emulator
<div id="EmpDisplayPic" style="float: left;">
<img id="empPic" alt="" src="http://183.82.99.100:9080/emp/GetPhoto?empId=7" width="90px" height="100px" style="border-radius: 12px;">
</div>
I have tested a simple img tag in an Android device and the image displayed just fine.
<img src="http://183.82.99.100:9080/emp/GetPhoto?empId=7">
It could be that your Emulator is not connected to the Internet.
The code itself is fine.
Related
I'm trying to load dynamic images here. My api provides me only with the filename. I combine it with the path (which is the public path of nodejs), then I require it from vuejs to show the image.
It all works fine in the development but when it comes to production build it fails and says "Cannot find the module".
I've spent tons of hours to this and still cannot find an answer.
Edit - I noticed after the production build earlier images I saved from development mode is also displayed in production build.but If I try save a new image from a production build it wouldnt work.My URL is somehow converted to point the public/img folder in vue from development mode.
in HTML
<div class="section-1" v-for="(cardinfo,index) in cardinfos" style="cursor:pointer" :key="index" #mouseover="moment(cardinfo)">
<div class="img-wrap" >
<a #click="deleteAd(cardinfo)">
<mdb-icon v-if="data.myads" icon="trash-alt" class="close red-text" size="lg" />
</a>
<img class="img-fluid ad-image" :src="getImgUrl(cardinfo.images[0])" alt="ad" v-on:click="navigateToAd(cardinfo)" />
</div>
<div class="wrapper" v-on:click="navigateToAd(cardinfo)">
<mdb-card-title>{{cardinfo.subject}}</mdb-card-title>
<hr class="mb-3" />
<div class="venue">
<strong>Venue:</strong>
<p>{{cardinfo.venue}}</p>
</div>
<div class="contact">
<strong>Contact:</strong>
<p>{{cardinfo.contact}}</p>
</div>
<div class="Conducted-By" >
<p title="Click to visit">{{cardinfo.lecturer}}</p>
</div>
</div>
<div class="info-footer">
<div class="info">
<div class="name">{{time}}</div>
</div>
</div>
</div>
in Script
getImgUrl(pic) {
return require("../../../tuition/public/images/" + pic);
}
Error
vue.runtime.esm.js:1888 Error: Cannot find module './marques-brownlee-wallpaper.jpg-1588649676704.png'
at n (.*$:142)
at s (.*$:137)
at o.getImgUrl (Card.vue:107)
at Card.vue?852f:1
at o.jt [as _l] (vue.runtime.esm.js:2630)
at o.B (Card.vue?852f:1)
at o.e._render (vue.runtime.esm.js:3548)
at o.a (vue.runtime.esm.js:4066)
at na.get (vue.runtime.esm.js:4479)
at na.run (vue.runtime.esm.js:4554)```
Upload works nicely but I am getting this annoying warning. What is causing this problem?
I am using like this
<el-upload
class="avatar-uploader"
ref="upload"
action="/app/admin/product-image"
:with-credentials="true"
:thumbnail-mode="true"
:file-list="fileList"
:on-success="handleAvatarSuccess"
:on-change="picPreview"
:on-error="uploadError"
:auto-upload="true"
:data="{product_id:data.id}"
:multiple="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
list-type="picture-card"
:before-upload="beforeAvatarUpload">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
Try:
<el-form ref="form" label-width="120px">
<!-- form content here --->
</el-form>
Worked form me.
I am unable to preview my sample mobile page in Firefox on Android which has been developed using notes 9. Seems Dojo 1.8 not compatible with Mozilla in Android. I did the same logic using Dojo 1.8.3. It works fine in iPad and Blackberry, but not with Mozilla in Android. its work well in native browser and chrome in Android. Even its not working with Chrome desktop browser with Android user agent
Does anyone face the same issue?
How can I resolve the issue?
To reproduce the issue. Open the following URL and change user agent to Android and check.
Same thing works well both chrome with android UA and Firefox in android Tab when upgrade Dojo version to 1.9. But i need to get work with Dojo 1.8.1 since new Domino 9 have Dojo 1.8
Click here for the demo: Dojo 1.8 demo
The JavaScript:
dojo.require('dojox.mobile.parser')
dojo.require('dojox.mobile.deviceTheme')
dojo.require('dojox.mobile')
dojo.require('dojox.mobile.FixedSplitter')
dojo.require('dojox.mobile.ScrollableView')
dojo.ready(
function()
{
dojox.mobile.parser.parse()
}
)
The HTML:
<div dojoType="dojox.mobile.FixedSplitter">
<div dojoType="dojox.mobile.Container"
id="landscape" style="width:200px;border-right:1px solid black">
<h1 dojoType="dojox.mobile.Heading" fixed="top"
class="mblHeadingLeft"></h1>
<div id="mainMenu" dojoType="dojox.mobile.ScrollableView"
selected="true">
<ul dojoType="dojox.mobile.EdgeToEdgeList"
transition="slide" stateful="true">
<li dojoType="dojox.mobile.ListItem" moveTo="Contact" label="Contact" selected="true"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="AccountInfo" label="Account Info"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="ContactInfo" label="Contact Info"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="Social" label="Social"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Personal Info"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Comments"></li>
<li dojoType="dojox.mobile.ListItem" moveTo="PersonalInfo" label="Additional"></li>
</ul>
</div>
</div>
<div dojoType="dojox.mobile.Container">
<h1 dojoType="dojox.mobile.Heading" fixed="top" label="Contact" class="mblHeadingRight">
<span dojoType='dojox.mobile.ToolBarButton'>Navigation</span>
<span dojoType='dojox.mobile.ToolBarButton' style="float:left" > Back </span>
<span dojoType='dojox.mobile.ToolBarButton'> HI </span>
<span dojoType='dojox.mobile.ToolBarButton'>Back </span>
</h1>
<div id="fullFrame">
<div id="Contact" dojoType="dojox.mobile.ScrollableView"
selected="true">
Contact
</div>
<div id="AccountInfo"
dojoType="dojox.mobile.ScrollableView"
selected="false">
Account Info
</div>
<div id="ContactInfo"
dojoType="dojox.mobile.ScrollableView"
selected="false">
Contact Info
</div>
<div id="Social" dojoType="dojox.mobile.ScrollableView"
selected="false">
Social
</div>
<div id="PersonalInfo"
dojoType="dojox.mobile.ScrollableView"
selected="false">
Personal Info
</div>
<div id="Comments"
dojoType="dojox.mobile.ScrollableView"
selected="false">
</div>
<div id="Additional"
dojoType="dojox.mobile.ScrollableView"
selected="false">
</div>
</div>
<div id="PopUpPanels">
</div>
</div>
</div>
A few pointers:
Send your code through a Validator (looks OK
Make sure you selected HTML5 as property in the XSP properties
Be nice and put ; at the end of your lines in JavaScript (I once spend 2h debugging since one browser was OK without and the other wasn't)
make sure you use the XPage properties and not passthu HTML for your dojo.require
I am currently working on a slider, using touchSlider, and it mouseTouch option won't work for me.
Slider itself works fine, but not the mouseTouch option.
What am I doing wrong?
Here is my js:
$(document).ready(function() {
$(".touchslider").touchSlider({ mouseTouch: true });
});
and html:
<div class="touchslider">
<div class="touchslider-viewport" style="width:500px; height: 375px;overflow:hidden; border: 1px solid #f00;"><div>
<div class="touchslider-item"><img src="img/3540115854_5d302001da.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3542680555_ea43d85e0a.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3540231388_f8ec22b549.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3546828250_6f91b64ba7.jpg" width="500" height="354" /></div>
</div></div>
<div>
<span class="touchslider-prev">←</span>
<span class="touchslider-nav-item touchslider-nav-item-current">1</span>
<span class="touchslider-nav-item">2</span>
<span class="touchslider-nav-item">3</span>
<span class="touchslider-nav-item">4</span>
<span class="touchslider-next">→</span>
</div>
</div>
Got the same problem when accessing the .html via my local file system using the file-protocol
file://pathtothehtml/touchslidertest.html
The problem does not occur when I accessing the .html using http
http://hostnametothehtml/touchslidertest.html
I used chrome,firefox and safari on MacOS - using http solved the problem on all of them.
cause analysis
The browser handle the results gathered using the file-protocol different to results gathered via the http.
Careful: the following is only guessing, since I had not found anything about how any of the common browser handles the file-protocol.
Maybe the browser supports drag&drop for the file-protocol. This support may override the event handling of the page interpreter in the browser - such that the drag event on the image does never reach the DOM-event handling routine for the page.
Here's a picture of the problem: http://i55.tinypic.com/29g0izc.jpg
Problem Site: http://windowsphonedaily.blogspot.com/
I have my tweet and like button setup at the header of each new article underneath the title. It works extremely well with Chrome and Firefox. But I noticed that in IE9 both buttons are forced to the left and that the actual tweet button is missing. You can see in the above picture the comparison between FF4, Chrome 11, and IE9.
Does anyone know how to fix this without breaking it in the other browsers? Here is the code I have used to set up the buttons.
<div class='post-header'>
<table>
<div class='post-header-line-1'/>
<!-- Facebook's Like Button -->
<div style='float:right;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='arial' href='' layout='button_count' show_faces='false' width='10'/></div>
<!-- Twitter's Tweet Button -->
<div style='float:right;'><a class='twitter-share-button' data-count='horizontal' data-via='WinPhoneDaily' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span></table>