ajax open page image src fail #4275

bluelovers opened this Issue May 3, 2012 · 9 comments


None yet
7 participants

page.1 ( http://localhost/dura/ )

<a href="?controller=page&amp;action=mobile" class="ui-link">攜帶対応</a>

page.2( http://localhost/dura/?controller=page&amp;action=mobile )

<div class="align_center">
<p>Mobile Support!</p>
<img style="width: 40%;" src="http://localhost/dura/static/img/page/page.mobile.1.png">
<img style="width: 40%;" src="http://localhost/dura/static/img/page/page.mobile.2.png">

when click page.1 link

jquery mobile will change page.2

<div class="align_center">
<img style="width: 40%;" src="http://localhost/dura/?controller=page&amp;action=mobilestatic/img/page/page.mobile.1.png">
<img style="width: 40%;" src="http://localhost/dura/?controller=page&amp;action=mobilestatic/img/page/page.mobile.2.png">

this bug make img can't show
because it make img src is bad url


MauriceG commented May 3, 2012

seems to be the same as #4195


jaspermdegroot commented May 3, 2012

hi @bluelovers

Are both page 1 and 2 in the same document (multi-page template)?
Query params are not supported in that case. See second to last paragraph of http://jquerymobile.com/test/docs/pages/page-navmodel.html

page.1 and page.2 not in same html

so whan click page.1 link will auto ajax get page.2
but page.2 img src changed by jquery mobile


frequent commented May 3, 2012

also check here: #4253

maybe it's more parameter handling by JQM than image-src related. I wish JQM had a default handler for intercepting links like ?param1=foo&param2=bar by default, but I understand there probably is no standard action on links like this. I'm currently trying to set it up with pagebeforechange as @jblas described. Will post how it turns out.


toddparker commented May 13, 2012

I agree with @frequent that this issue here is probably the query params breaking unless @bluelovers is using one of the plugins to support this. Any work on this guys?


dcarrith commented May 14, 2012

@bluelovers: I'm not saying you haven't identified some kind of an issue here, but one thing you can try independently from the JQM devs is to implement clean URLs for your application using Apache mod_rewrite. That's probably recommended anyway if you care about search engine results (SEO). That LOE for cleaning up your URLs probably depends on whether or not you're using a server-side framework (like CodeIgniter). Before I started using CodeIgniter, I actually implemented my own minimalistic MVC framework (without the M) and also wrote a bunch of Apache mod_rewrite rules to map things accordingly. I can share those Apache regexs with you if you need.


toddparker commented May 16, 2012

@dcarrith - thanks for the kind offer to help out @bluelovers. I do think this may be an issue we can close but I'll wait a few days to see if we hear back.


dcarrith commented May 16, 2012

Reading this again....I don't think it has anything to do with query params. So, you can probably close it out.

@bluelovers: try using a path that starts at document root:

<img style="width: 40%;" src="/dura/static/img/page/page.mobile.1.png">

You may also need to specify a base tag in your head.

It might look something like this:

<base href="http://localhost" />

I'm using CodeIgniter, so I just use the base_url() function provided by CI.

<base href="<?php echo base_url(); ?>" />

bluelovers closed this May 16, 2012

ucavus commented Jun 29, 2012

I'm experiencing the exact same issue inside cordova 1.7 on the iOS version. It does not seem to happen in the Android version. I can see the URLs in weinre and all pages with a URL like http://foo.com/?bar in the page's data-url cause it. Each img with a relative src, like images/baz.png, gets prefixed by the entire URL, resulting in http://foo.com/?barimages/baz.png. Manually editing the src in weinre to remove the query part makes the image show correctly.

If I set a <base> then how will local js/css assets load?

I'm not sure if this is a bug in jQm, cordova or a mixture of both.

@dcarrith afaik, base hrefs should always have a trailing slash.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment