퓨즈[Fusetools] 커뮤니티에 올라온 질문에 대한 답변입니다.

Q: DB에서 ./Assets/Logo/Company.png 란 값을 가져와서 <Image File=”{Logo}”/>는 잘 작동하나, DB에서 Company.png란 값만 가져와 가공하여 ./Assets/Logo/Company.png를 <Image File=”./Assets/Logo/{Logo}”/> 또는 <Image File=”{Path}/{Logo}”/>는 작동하지 않습니다.

A: map 함수를 이용해서 이미지의 전체 경로를 만들 수 있습니다. 또한 이미지는 .unoproj 파일에 번들로 추가해야 합니다.

아래는 주요 파일들의 소스입니다.

[[ ImageLoad.unoproj ]]

1
2
3
4
5
6
7
8
9
10
11
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS"
  ],
  "Includes": [
    "*",
    "Assets/*:Bundle"
  ]
}

[[ MainView.ux ]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<App>
    <JavaScript File="MainView.js"/>
    <ClientPanel Background="#f1f1f1">
        <Image File="./Assets/FuseLogo.png" Y="0"/>
        <Image File="./Assets/test.jpg" Y="200"/>
       
        <Image File="{MainImg}" Y="410"/>
        <Text Value="MainImg Path: {MainImg}" Y="410"/>

        <DockPanel>
            <Grid ColumnCount="2" Dock="Bottom">
                <Button Background="#FF516E6F" Text="img 1" Clicked="{changeImg1}" Height="40"/>
                <Button Background="#07A7E16F" Text="img 2" Clicked="{changeImg2}" Height="40"/>
            </Grid>
        </DockPanel>
    </ClientPanel>
</App>

[[ MainView.js ]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var Observable = require("FuseJS/Observable");

var imgMap = Observable('test.jpg');

var MainImg = imgMap.map(function(x) {
    return 'Assets/' + x;
});

function changeImg1(args) {
    imgMap.value = "test1.jpg";
}

function changeImg2(args) {
    imgMap.value = "test2.jpg";
}

module.exports = {
    MainImg: MainImg,
    changeImg1: changeImg1,
    changeImg2: changeImg2
}

전체 프로젝트 다운로드: http://j.mp/2mf5eII