Блог

Я следую официальному ASP.Net Core 101 ContosoCrafts учебное пособие, и у меня возникли некоторые проблемы с отображением изображения, и я не уверен, в чем проблема. Пока отображается только ссылка с рамкой вокруг нее. Я тестировал с использованием Edge и Chrome, и оба показывают одинаковые результаты. Я также попытался проверить элемент, и он показывает ссылку URL. Я попытался добавить высоту и ширину вручную, как в обучающем видео, но он отклоняет эти 2 переменные и выдает ошибку

 invalid property
  

Вот мой код для JSON, site.css, index и icon, а также службы файлов JSON. Это природа ссылки? Я не пробовал добавлять путь к файлу со своего компьютера, поэтому я попробую это и сообщу, если моя проблема была решена, но мне бы очень хотелось, чтобы она работала с URL.

 [
  {
    "Id": "jeff-assistant",
    "Maker": "@jeff",
    "img": "https://i.ibb.co/p3k7CZg/73-738945-woman-firefighter-icon-firewoman-emoji-hd-png-download.png"

  }
]
  
  

 .checked {
    color: orange;
}

.fa-star {
    cursor: pointer;
}

/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

.card-header .card:hover .card-img {
    opacity: 1;
    -webkit-transform-style: preserve-3d;
}

.card-header .card-body {
    height: 100px;
    font-family: 'Nunito', sans-serif;
    background: #fbfafd;
}



.card-header.card-img {
    height: 330px;
    vertical-align: top;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    opacity: .8;
}

.modal .card-img {
    height: 500px;
    vertical-align: top;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

card-header .card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(37,33,82,.12), 0 4px 8px rgba(37,33,82,.06);
}

.card-footer {
    background: #fbfafd;
}


a.navbar-brand {
    white-space: normal;
    font-family: 'Yellowtail', cursive;
    font-size: xx-large;
    text-align: center;
    word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #252152;
    border-color: #252152;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #e9a8a6;
        border-color: #e9a8a6;
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

p {
    font-family: 'Nunito', sans-serif;
}

h1 {
    font-family: 'Nunito', sans-serif;
}

ul {
    font-family: 'Nunito', sans-serif;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
    font-family: 'Nunito', sans-serif;
}
/*Backgrounds*/
.bg-navbar {
    background: -webkit-linear-gradient(110deg, #e9a8a6 60%, #252152 60%);
    background: -o-linear-gradient(110deg, #e9a8a6 60%, #252152 60%);
    background: -moz-linear-gradient(110deg, #e9a8a6 60%, #252152 60%);
    background: linear-gradient(110deg, #e9a8a6 60%, #252152 60%);
}

.bg-footer {
    background: -webkit-linear-gradient(110deg, #252152 60%, #e9a8a6 60%);
    background: -o-linear-gradient(110deg, #252152 60%, #e9a8a6 60%);
    background: -moz-linear-gradient(110deg, #252152 60%, #e9a8a6 60%);
    background: linear-gradient(110deg, #252152 60%, #e9a8a6 60%);
}
  

  public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
        public JsonFileIconService IconService;
        public IEnumerable<Icon> Icons { get; private set; }

        public IndexModel(ILogger<IndexModel> logger, JsonFileIconService iconService)
        {
            _logger = logger;
            IconService = iconService;
        }

        public void OnGet()
        {
            Icons = IconService.GetIcons();

        }
    }
}
  

 public class Icon
    {
        public string Id { get; set; }
        public string Maker { get; set; }

        [JsonPropertyName("img")]
        public string Image { get; set; }

        public override string ToString() => JsonSerializer.Serialize<Icon>(this);

        

    }
}
  

 @page
@model IndexModel
@{
    ViewData["Title"] = "Ask Jeff!";
}

<div class="text-center">
    <h1 class="display-4">Hi, I'm Jeff! Your personal AI!</h1>
    <p>Let's Talk</p>
</div>



<div class="card-header">
    @foreach (var icon in Model.Icons)
    {
        <div class="card">
            <div class="card-img" style="background-image : url('@icon.Image');"></div>
            <div class ="card-body">
                <h5>@icon.Image</h5>
            </div>
        </div>
       }
</div>
  

   public class JsonFileIconService
    {
        public JsonFileIconService(IWebHostEnvironment webHostEnvironment)
        {
            WebHostEnvironment = webHostEnvironment;
        }

        public IWebHostEnvironment WebHostEnvironment { get; }

        private string JsonFileName
        {
            get { return Path.Combine(WebHostEnvironment.WebRootPath, "data", "jeff.json"); }
        }

        public IEnumerable<Icon> GetIcons()
        {
            using( var jsonFileReader = File.OpenText(JsonFileName))
            {
                return JsonSerializer.Deserialize<Icon[]>(jsonFileReader.ReadToEnd(),
                    new JsonSerializerOptions
                    {
                        PropertyNameCaseInsensitive = true
                    });
            }
        }
    }
}