How to display images in a flipview from SQL server

Question

I want to display images saved in SQL server management studio in FlipView using Universal Windows Platform. The data type for the Image is nvarchar using Image Path.

I've put in image url in the last record to test out if my code actually goes through the database.

And it does!
It just displays the last record which is an image url:

So i don't know why it cannot display the images that's saved in the database using image path. Pls help! Also, apologies if my coding doesn't make sense. I'm very new to programming :/

MainPage.html:

<FlipView x:Name="TheFlipView" SelectionChanged="DisplayedItemChanged" HorizontalAlignment="Stretch" Margin="-117,66,0,0"
        Grid.Row="1"
        Grid.ColumnSpan="3"
        VerticalAlignment="Stretch"  Height="1000" Width="1392">
    <FlipView.ItemTemplate>
        <DataTemplate >
            <Grid Margin="0,0,0,10">
                <Image HorizontalAlignment="Center"  VerticalAlignment="Top"   Source="{Binding ImgPath}" 

                       Stretch="Fill" Margin="123,0,0,0" Width="1269" Height="899" />
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

MainPage.xaml.cs:

namespace TMD_Display.Views
{
    public sealed partial class MainPage : Page
    {
        private string connectionString = @"Server=LAPTOP-IQQCR1C1\SQLEXPRESS;Database=SampleDB;User Id=alish;Password=polylife16;";

        //Make a place to store the timer
        private readonly DispatcherTimer _timer;

        //Make a place to store the last time the displayed item was set
        private DateTime _lastChange;
        public int Id { get; set; }

        public string ImgPath { get; set; }
        public MainPage()
        {
            InitializeComponent();

            //Configure the timer
            _timer = new DispatcherTimer
            {
                //Set the interval between ticks (in this case 2 seconds to see it working)
                Interval = TimeSpan.FromSeconds(2)
            };

            //Change what's displayed when the timer ticks
            _timer.Tick += ChangeImage;
            //Start the timer
            _timer.Start();
        }

        protected override async void OnNavigatedTo(NavigationEventArgs e)
        {
            var images = await GetImagesAsync();

            base.OnNavigatedTo(e);
        }

        public async Task<IEnumerable<Models.Images>> GetImagesAsync()
        {
            using (var conn = new SqlConnection(connectionString))
            {
                conn.Open();

                var images = await conn.QueryAsync<Models.Images>(
                    @"SELECT ImgId As Id,ImgPath 
                    FROM ImageSave");
                TheFlipView.ItemsSource = images;
                //This is the code to be changed
                return images;
            }
        }

        private void ChangeImage(object sender, object o)
        {
            //Get the number of items in the flip view
            //var totalItems = TheFlipView.Items.Count;

            var totalItems = TheFlipView.Items.Count;
            //Figure out the new item's index (the current index plus one, if the next item would be out of range, go back to zero)
            var newItemIndex = (TheFlipView.SelectedIndex + 1) % totalItems;

            //Set the displayed item's index on the flip view
            TheFlipView.SelectedIndex = newItemIndex;
        }

        private void DisplayedItemChanged(object sender, SelectionChangedEventArgs e)
        {
            //Show the time deltas...
            var currentTime = DateTime.Now;

            if (_lastChange != default(DateTime))
            {
                TimeDelta.Text = (currentTime - _lastChange).ToString();
            }

            _lastChange = currentTime;

            //Since the page is configured before the timer is, check to make sure that we've actually got a timer
            if (!ReferenceEquals(_timer, null))
            {
                _timer.Stop();
                _timer.Start();
            }
       }
  }

Image.cs:

namespace TMD_Display.Models
{
    public class Image
    {
        public int Id { get; set; }

        //public string Name { get; set; }

        //public DateTime FirstAppearance { get; set; }

        public string ImgPath { get; set; }
    }
}

Answer 1

Although your Binding code is incomplete, but I judged that the problem was not in the binding code. You might not know that UWP app has application data folder and installation folder. If you put the images in the 'Assets/Images/' folder of the projects, it actually is installation folder. Then, if you want to get files from there. You need to use the "ms-appx:///" prefix in the URI.

So, if you get the ImgPath value from your database like this '/Images/1.jpg'. In your code, you should add ms-appx:///Assets/ to it.

Please check my following code sample for reference:

<FlipView x:Name="FlipView">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding ImgPath}"></Image>
            </DataTemplate>
        </FlipView.ItemTemplate>
</FlipView>

public sealed partial class MainPage : Page
{
    public ObservableCollection<Test> tests { get; set; }
    public MainPage()
    {
        this.InitializeComponent();
        string path = "/Images/animals.jpg";
        tests = new ObservableCollection<Test>() { new Test() {ImgPath="ms-appx:///Assets/"+path } };
        FlipView.ItemsSource = tests;
    }
}

public class Test
{
    public String ImgPath { get; set; }
}