NativeScript Image with path won't load but url works fine

up vote
0
down vote

favorite

My NativeScript Image is not showing when I use a a path to a file. My code currently looks like this:

<StackLayout>

    <Image src="~/assets/logo"></Image>

    <Image src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"></Image>

</StackLayout>

The lower Image using a url is showing up but the one above isn't.

I also tried these:

    <Image src="/assets/logo.png"></Image>

    <Image src="../assets/logo.png"></Image>

    <Image src="../../assets/logo.png"></Image>

And other options but nothing works.

I have a folder assets inside my app folder and inside I have a logo.png picture, which is the picture from the url above.

Also I don't get any console message, that it can't find my file.

Any Ideas?

asked Nov 9 at 16:13

Jonas

336114

Can you give a try for ~/app/assets/logo.png?
– Manoj
Nov 9 at 16:20

try <Image src="./assets/logo.png"></Image> or <image src="./assets/logo.png"></image>. Notice that the path is ./
– Jacopo Sciampi
Nov 9 at 16:20

relative path depends on the path your app is running under, is it /app? /dist? find out and use it
– Nikos M.
Nov 9 at 16:30

@Manoj thanks it works with ~/app/assets. Even though in the docs they just use ~/assets.
– Jonas
Nov 9 at 18:56

@JacopoSciampi My component is not in the same folder as the assets. Its in app/pages/mypage, while assets is in app/assets. So ../../ should work as far as I know but it isn't ./ isn't working either.
– Jonas
Nov 9 at 19:00

add a comment |

up vote
0
down vote

favorite

My NativeScript Image is not showing when I use a a path to a file. My code currently looks like this:

<StackLayout>

    <Image src="~/assets/logo"></Image>

    <Image src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"></Image>

</StackLayout>

The lower Image using a url is showing up but the one above isn't.

I also tried these:

    <Image src="/assets/logo.png"></Image>

    <Image src="../assets/logo.png"></Image>

    <Image src="../../assets/logo.png"></Image>

And other options but nothing works.

I have a folder assets inside my app folder and inside I have a logo.png picture, which is the picture from the url above.

Also I don't get any console message, that it can't find my file.

Any Ideas?

asked Nov 9 at 16:13

Jonas

336114

Can you give a try for ~/app/assets/logo.png?
– Manoj
Nov 9 at 16:20

try <Image src="./assets/logo.png"></Image> or <image src="./assets/logo.png"></image>. Notice that the path is ./
– Jacopo Sciampi
Nov 9 at 16:20

relative path depends on the path your app is running under, is it /app? /dist? find out and use it
– Nikos M.
Nov 9 at 16:30

@Manoj thanks it works with ~/app/assets. Even though in the docs they just use ~/assets.
– Jonas
Nov 9 at 18:56

@JacopoSciampi My component is not in the same folder as the assets. Its in app/pages/mypage, while assets is in app/assets. So ../../ should work as far as I know but it isn't ./ isn't working either.
– Jonas
Nov 9 at 19:00

add a comment |

up vote
0
down vote

favorite

My NativeScript Image is not showing when I use a a path to a file. My code currently looks like this:

<StackLayout>

    <Image src="~/assets/logo"></Image>

    <Image src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"></Image>

</StackLayout>

The lower Image using a url is showing up but the one above isn't.

I also tried these:

    <Image src="/assets/logo.png"></Image>

    <Image src="../assets/logo.png"></Image>

    <Image src="../../assets/logo.png"></Image>

And other options but nothing works.

I have a folder assets inside my app folder and inside I have a logo.png picture, which is the picture from the url above.

Also I don't get any console message, that it can't find my file.

Any Ideas?

asked Nov 9 at 16:13

Jonas

336114

My NativeScript Image is not showing when I use a a path to a file. My code currently looks like this:

<StackLayout>

    <Image src="~/assets/logo"></Image>

    <Image src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"></Image>

</StackLayout>

The lower Image using a url is showing up but the one above isn't.

I also tried these:

    <Image src="/assets/logo.png"></Image>

    <Image src="../assets/logo.png"></Image>

    <Image src="../../assets/logo.png"></Image>

And other options but nothing works.

I have a folder assets inside my app folder and inside I have a logo.png picture, which is the picture from the url above.

Also I don't get any console message, that it can't find my file.

Any Ideas?

angular nativescript

asked Nov 9 at 16:13

Jonas

336114

asked Nov 9 at 16:13

Jonas

336114

asked Nov 9 at 16:13

Jonas

336114

asked Nov 9 at 16:13

Jonas

336114

asked Nov 9 at 16:13

Jonas

336114

Can you give a try for ~/app/assets/logo.png?
– Manoj
Nov 9 at 16:20

try <Image src="./assets/logo.png"></Image> or <image src="./assets/logo.png"></image>. Notice that the path is ./
– Jacopo Sciampi
Nov 9 at 16:20

relative path depends on the path your app is running under, is it /app? /dist? find out and use it
– Nikos M.
Nov 9 at 16:30

@Manoj thanks it works with ~/app/assets. Even though in the docs they just use ~/assets.
– Jonas
Nov 9 at 18:56

@JacopoSciampi My component is not in the same folder as the assets. Its in app/pages/mypage, while assets is in app/assets. So ../../ should work as far as I know but it isn't ./ isn't working either.
– Jonas
Nov 9 at 19:00

add a comment |

Can you give a try for ~/app/assets/logo.png?
– Manoj
Nov 9 at 16:20

try <Image src="./assets/logo.png"></Image> or <image src="./assets/logo.png"></image>. Notice that the path is ./
– Jacopo Sciampi
Nov 9 at 16:20

relative path depends on the path your app is running under, is it /app? /dist? find out and use it
– Nikos M.
Nov 9 at 16:30

@Manoj thanks it works with ~/app/assets. Even though in the docs they just use ~/assets.
– Jonas
Nov 9 at 18:56

@JacopoSciampi My component is not in the same folder as the assets. Its in app/pages/mypage, while assets is in app/assets. So ../../ should work as far as I know but it isn't ./ isn't working either.
– Jonas
Nov 9 at 19:00

Can you give a try for ~/app/assets/logo.png?
– Manoj
Nov 9 at 16:20

try <Image src="./assets/logo.png"></Image> or <image src="./assets/logo.png"></image>. Notice that the path is ./
– Jacopo Sciampi
Nov 9 at 16:20

relative path depends on the path your app is running under, is it /app? /dist? find out and use it
– Nikos M.
Nov 9 at 16:30

@Manoj thanks it works with ~/app/assets. Even though in the docs they just use ~/assets.
– Jonas
Nov 9 at 18:56

@JacopoSciampi My component is not in the same folder as the assets. Its in app/pages/mypage, while assets is in app/assets. So ../../ should work as far as I know but it isn't ./ isn't working either.
– Jonas
Nov 9 at 19:00

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

Supposing your structure looks like this:

app/ assets/ logo.png components/ ... app.component.ts ...

I'd recommend trying:
<Image src="~/assets/logo.png"></Image>

~/ means you're looking in home directory of your project.

Check if app is actually your home directory. It might be src above app. Then you'd need to go for ~/app/asset/...

edited Nov 9 at 20:59

answered Nov 9 at 17:52

ogrodowiczp

216

Yes my structure looks like this. I tried that and it still not working. Thanks for the help tho!
– Jonas
Nov 9 at 18:52

I see in your comments, that you had to go with ~/app/assets. It seemts that your home directory is src, not app. Glad that you've found your solution.
– ogrodowiczp
Nov 9 at 19:27

add a comment |

up vote
0
down vote

it should contain extension name

 <Image src="~/assets/logo.png"></Image>

answered Nov 13 at 7:29

Raditya Syahrozi

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229416%2fnativescript-image-with-path-wont-load-but-url-works-fine%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

Supposing your structure looks like this:

app/ assets/ logo.png components/ ... app.component.ts ...

I'd recommend trying:
<Image src="~/assets/logo.png"></Image>

~/ means you're looking in home directory of your project.

Check if app is actually your home directory. It might be src above app. Then you'd need to go for ~/app/asset/...

edited Nov 9 at 20:59

answered Nov 9 at 17:52

ogrodowiczp

216

Yes my structure looks like this. I tried that and it still not working. Thanks for the help tho!
– Jonas
Nov 9 at 18:52

I see in your comments, that you had to go with ~/app/assets. It seemts that your home directory is src, not app. Glad that you've found your solution.
– ogrodowiczp
Nov 9 at 19:27

add a comment |

up vote
1
down vote

Supposing your structure looks like this:

app/ assets/ logo.png components/ ... app.component.ts ...

I'd recommend trying:
<Image src="~/assets/logo.png"></Image>

~/ means you're looking in home directory of your project.

Check if app is actually your home directory. It might be src above app. Then you'd need to go for ~/app/asset/...

edited Nov 9 at 20:59

answered Nov 9 at 17:52

ogrodowiczp

216

Yes my structure looks like this. I tried that and it still not working. Thanks for the help tho!
– Jonas
Nov 9 at 18:52

I see in your comments, that you had to go with ~/app/assets. It seemts that your home directory is src, not app. Glad that you've found your solution.
– ogrodowiczp
Nov 9 at 19:27

add a comment |

up vote
1
down vote

Supposing your structure looks like this:

app/ assets/ logo.png components/ ... app.component.ts ...

I'd recommend trying:
<Image src="~/assets/logo.png"></Image>

~/ means you're looking in home directory of your project.

Check if app is actually your home directory. It might be src above app. Then you'd need to go for ~/app/asset/...

edited Nov 9 at 20:59

answered Nov 9 at 17:52

ogrodowiczp

216

Supposing your structure looks like this:

app/ assets/ logo.png components/ ... app.component.ts ...

I'd recommend trying:
<Image src="~/assets/logo.png"></Image>

~/ means you're looking in home directory of your project.

Check if app is actually your home directory. It might be src above app. Then you'd need to go for ~/app/asset/...

edited Nov 9 at 20:59

answered Nov 9 at 17:52

ogrodowiczp

216

edited Nov 9 at 20:59

answered Nov 9 at 17:52

ogrodowiczp

216

answered Nov 9 at 17:52

ogrodowiczp

216

answered Nov 9 at 17:52

ogrodowiczp

216

Yes my structure looks like this. I tried that and it still not working. Thanks for the help tho!
– Jonas
Nov 9 at 18:52

I see in your comments, that you had to go with ~/app/assets. It seemts that your home directory is src, not app. Glad that you've found your solution.
– ogrodowiczp
Nov 9 at 19:27

add a comment |

Yes my structure looks like this. I tried that and it still not working. Thanks for the help tho!
– Jonas
Nov 9 at 18:52

I see in your comments, that you had to go with ~/app/assets. It seemts that your home directory is src, not app. Glad that you've found your solution.
– ogrodowiczp
Nov 9 at 19:27

Yes my structure looks like this. I tried that and it still not working. Thanks for the help tho!
– Jonas
Nov 9 at 18:52

I see in your comments, that you had to go with ~/app/assets. It seemts that your home directory is src, not app. Glad that you've found your solution.
– ogrodowiczp
Nov 9 at 19:27

add a comment |

up vote
0
down vote

it should contain extension name

 <Image src="~/assets/logo.png"></Image>

answered Nov 13 at 7:29

Raditya Syahrozi

add a comment |

up vote
0
down vote

it should contain extension name

 <Image src="~/assets/logo.png"></Image>

answered Nov 13 at 7:29

Raditya Syahrozi

add a comment |

up vote
0
down vote

it should contain extension name

 <Image src="~/assets/logo.png"></Image>

answered Nov 13 at 7:29

Raditya Syahrozi

it should contain extension name

 <Image src="~/assets/logo.png"></Image>

answered Nov 13 at 7:29

Raditya Syahrozi

answered Nov 13 at 7:29

Raditya Syahrozi

answered Nov 13 at 7:29

Raditya Syahrozi

answered Nov 13 at 7:29

Raditya Syahrozi

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl