ajax open page image src fail

[bluelovers]

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

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

page.2( http://localhost/dura/?controller=page&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">
</div>

when click page.1 link

jquery mobile will change page.2

<div class="align_center">
<p>攜帶対応</p>
<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">
</div>

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

[MauriceG]

seems to be the same as #4195

[jaspermdegroot]

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

[bluelovers]

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]

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]

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]

@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]

@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]

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(); ?>" />

[ucavus]

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.