5465

Для того, чтобы добавить фото из input на одной HTML странице в блок div на другой HTML странице с помощью JavaScript, вам нужно выполнить следующие шаги:

В admin.html после успешной загрузки файла, сохраните имя загруженного файла в локальном хранилище с помощью localStorage.setItem(). Например:

localStorage.setItem('imageName', file.name);

Перейдите на страницу index.html с помощью window.location.href или window.location.replace(). Например:

window.location.replace("index.html");

В index.html, используйте JavaScript для получения значения имени файла из локального хранилища с помощью localStorage.getItem(). Например:

var imageName = localStorage.getItem('imageName');

Затем, используйте полученное имя файла, чтобы создать новый элемент img и добавить его в блок div с идентификатором uploaded-image. Например:

var img = document.createElement('img');
img.src = 'assets/img/' + imageName;
document.getElementById('uploaded-image').appendChild(img);

Важно отметить, что вы должны сохранить загруженный файл в папку на сервере, а затем использовать правильный путь к этому файлу при создании элемента img. Например, если вы сохраните загруженный файл в папку assets/img, то путь к файлу будет assets/img/имя_файла.

Проблема может быть связана с тем, что вы используете относительную ширину min(750px, 85%) для элемента с классом .slider, а не задаете ему явно ширину в пикселях. Slick slider может иметь проблемы с вычислением правильной ширины элемента при использовании относительных единиц измерения.

Попробуйте задать явно ширину для элемента .slider в пикселях, например:

.slider{
    width: 750px;
    margin: 0 auto;
    ...
}

Если это не поможет, попробуйте добавить в настройки responsive параметр slidesToShow, чтобы явно указать количество слайдов, отображаемых при разных ширинах экрана. Например:

responsive: [
    {
        breakpoint: 768,
        settings: {
            arrows: false,
            dots: true,
            slidesToShow: 1
        }
    }
]

Это должно гарантировать, что при ширине экрана менее 768 пикселей будет отображаться только один слайд, а несколько слайдов будут отображаться только при больших разрешениях.

Ошибка "Unknown arg slug in data.category.create.slug for type CategoryCreateWithoutProductsInput" возникает потому, что аргумент slug не является доступным аргументом для CategoryCreateWithoutProductsInput, который используется для создания категории без товаров. В вашем коде вы пытаетесь создать категорию и задать ей значение поля slug, используя create. Чтобы это сработало, вы должны использовать CategoryCreateInput, который позволяет использовать свойства, такие как slug.

Исправьте свой код, чтобы использовать CategoryCreateInput вместо CategoryCreateWithoutProductsInput. Вот пример кода:

const product = await prisma.product.create({
  data: {
    title: productName,
    slug: slugify(productName, { locale: 'ru', lower: true }),
    description: faker.commerce.productDescription(),
    price: +faker.commerce.price(350, 9900, 0),
    images: Array.from({
      length: faker.datatype.number({ min: 2, max: 7 }),
    }).map(() => faker.image.imageUrl()),
    category: {
      create: {
        title: categoryName,
        slug: slugify(categoryName, { locale: 'ru', lower: true }),
        // Добавьте slug в качестве аргумента для CategoryCreateInput
      },
    },
    reviews: {
      create: [
        {
          rating: faker.datatype.number({ min: 1, max: 5 }),
          text: faker.lorem.paragraph(),
          user: {
            connect: { id: 1 },
          },
        },
        {
          rating: faker.datatype.number({ min: 1, max: 5 }),
          text: faker.lorem.paragraph(),
          user: {
            connect: { id: 1 },
          },
        },
      ],
    },
  },
});

Проблема, вероятнее всего, связана с тем, что при билде приложения Vite автоматически изменяет путь к статическим ресурсам, таким как изображения, чтобы оптимизировать их загрузку на клиенте.

В первом случае, когда вы используете переменную для задания пути к изображению, Vite не может изменить этот путь, так как он не указан явно в HTML-коде.

Во втором случае, когда вы явно указываете путь к изображению в HTML-коде, Vite может изменить этот путь при билде, чтобы оптимизировать загрузку изображения.

Чтобы решить эту проблему, вы можете явно указать путь к изображению в HTML-коде и использовать его вместо переменной. Если вы хотите сохранить переменную для удобства управления путями к ресурсам, то вы можете создать объект конфигурации, который будет хранить пути к изображениям, и использовать его для задания путей в HTML-коде и в JavaScript-коде.

Например, в вашем случае, вы можете создать объект конфигурации в отдельном файле, например, config.js, и импортировать его в ваш код:

// config.js
export default {
  imagePath: '/src/assets/images/home/'
}

// ваш код
import config from './config.js'

<!-- явно указываем путь к изображению в HTML-коде -->
<img src="${config.imagePath}nortland.png">

// используем путь к изображению в JavaScript-коде
item.objects[0].image = `${config.imagePath}nortland.png`;

Таким образом, вы можете легко изменять пути к изображениям, не меняя их везде в вашем коде. Кроме того, это позволит Vite оптимизировать пути к изображениям при билде.