Где идут изображения в IONIC 2

Ответ 1

EDIT: с Ionic 2 RC 0 правильное место для размещения ваших изображений находится в src/assets/img/, а правильный код для ссылки на изображение - <img src="assets/img/myImg.png">. См. Ionic журнал изменений для RC0 (в частности, № 28).

В настоящее время, используя официальное приложение "Drifty Co. Ionic 2 "Конференция" в качестве ссылки, изображения следует размещать внутри каталога www/.

В моем текущем приложении Ionic 2 изображение находится в www/img/logo.png, и оно упоминается в app/pages/page_name/page_name.html как <img src='img/logo.png'>, и оно работает как шарм.

В настоящее время используется:

• ionic- angular v2.0.0-beta.6 (package.json)
• ionic-native ^ 1.1.0 (package.json)
• ionic-cli v 2.0.0-beta.25 (установленный CLI)

Ответ 2

Используя Ionic 2 beta 6, я обработал это простой задачей gulp. Я сбросил изображения в app/assets/images (этот путь полностью произволен). Затем я добавил следующую задачу в gulpfile.js:

gulp.task("assets", function() {
    return gulp.src(["app/assets/images/*"])
        .pipe(gulp.dest("www/build/images"));
});

Вам также потребуется обновить задачи watch и build, чтобы включить новую задачу assets в свои вызовы runSequence(). Я не считаю, что порядок задач в последовательности имеет значение, в данном случае:

gulp.task("build", ["clean"], function(done) {
    runSequence(
        ["sass", "html", "fonts", "assets", "scripts"],
        function() {
            buildBrowserify().on("end", done);
        }
    );
});

Если вы выводите свои изображения на тот же путь, что и я, то ссылайтесь на свои изображения в CSS с ../images/image-name.png и в тегах <img> с build/images/image-name.png. Я подтвердил, что эти изображения видны как из браузера, так и из устройства Android. Я не думаю, что для iOS это должно быть иначе.

Ответ 3

Папка активов - это правильная папка для размещения любого носителя. Местоположение моего изображения:

fyi: если у вас нет папки, просто создайте ее

src > assets > img > background.png

variables.scss

.backgroundImage {
  background-image: url('../assets/img/background.png');
}

Затем на странице я хочу использовать его:

home.html

<ion-content padding class="backgroundImage">

</ion-content>

Вы также можете ссылаться на изображения следующим образом:

home.html

<ion-content padding class="backgroundImage">
    <img src="./assets/img/background.png" width="50%" />
</ion-content>

Ответ 4

www\lib\ионный внутри ионный создать одну папку img   теперь ваш путь   www\lib\ionic\img помещают фоновое изображение внутри этой папки img и в ваш

www\lib\ionic\css\ionic.css 
inside ionic.css find .view-container class and past this line.
.view-container {
background: url("../img/main_bg.jpg") repeat scroll 0 0 / 100% 100%;
}

Ответ 5

ОК, поэтому я нашел ответ на форуме IONIC. Изображения идут в www/img, пути к ним следующие:

url('../../img/appicon.png')

при ссылке css или html в папке страницы, которая находится в pages в app.

Надеюсь, это поможет кому угодно в будущем.

Ответ 6

У меня была такая же проблема, я нашел способ, я не знаю, лучший ли это, но он работает.

изображения должны отправляться в файл sibling для сборки, внутри папки www

• WWW
• построить
• IMG

Ответ 7

Получено решение. Его использование пути относительно index.html, а не папки шаблона.

Итак, нам нужен путь использования без.. /

src= "IMG/John_Williams.jpg"

Это работает как в браузере, так и в apk

Ответ 8

Мне не удалось заставить его работать с PNG файлом. Он работал в браузере, но при создании приложения и его развертывании на устройстве он не отображался.

Вместо того, чтобы возиться с файлом Gulp, чтобы понять, что происходит, я выяснил более простой способ:

Вставьте изображение в свой HTML (или CSS) с помощью URI данных.

В Интернете есть много инструментов, таких как этот, который преобразует ваш PNG в URI базы64.

Ответ 9

Если ваше изображение - pool.jpg. Поместите его в /src/assets/img/pool.jpg

Он должен находиться в этом каталоге (активы), так как он является вашим источником, откуда все построено.

Затем остановите свою команду ионной подачи (Ctrl-C) или все, что вы используете.

Затем удалите ВСЕ в каталоге www (все равно все перестраивается).

Затем перезагрузите сервер, снова запустив "ionic serve".

Это приведет к восстановлению каталога с изображениями. Вы можете ссылаться на изображение как фоновое изображение: url ('../assets/img/pool.jpg'); в вашем коде.

Я использую ionic 3, и стыдно, что он не подбирает изменения в каталоге ресурсов. IONIC должен смотреть на это.

Ответ 10

В настоящее время я на ионной версии 3.6, и мне пришлось использовать это для работы:  src="../../assets/img/myImage.jpg"

Путь assets/img/myImage не работал у меня

Я надеюсь, что это поможет

Ответ 11

Привет, ребята, я нашел метод добавления изображений в ионный v2

Создайте папку изображений в каталоге "www" (www/images/) и добавьте все изображения по этому пути.

Затем укажите путь изображения таким образом ex: для страниц src= "Images/logo.png"

в CSS .ThemeColor {background: url (/images/bg.png)};

Что это, работает для меня..

Спасибо