Как вставить изображение в ионный 2

Ответ 1

Лично я добавляю изображения везде, где это имеет смысл для вас, в вашем случае в папке app и добавьте задачу Gulp, чтобы скопировать изображения в папку www/build.

Вот как выглядит мой gulpfile.js: https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

Я добавил эту простую задачу в строку gulpfile.js вокруг строки 66.

gulp.task('images', function() {
    gulp.src('app/**/**/*.png')
    .pipe(gulp.dest('www/build'))
});

Убедитесь, что задача images добавлена ​​в список задач, которые выполняются перед задачей watch (задачи, перечисленные внутри [..], 3-я строка). Кроме того, не забудьте запустить gulpWatch всякий раз, когда вы добавляете новое изображение, например (строка 7)

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['images','sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      gulpWatch('app/**/*.png', function(){ gulp.start('images'); });
      buildBrowserify({ watch: true }).on('end', done);
    }
  );
});

В качестве альтернативы вы можете использовать этот Gulp плагин https://www.npmjs.com/package/ionic-gulp-image-task и require и использовать его в gulpfile.js аналогичном к другим задачам, таким как copyHTML, copyFonts, copyScripts здесь https://github.com/driftyco/ionic2-app-base/blob/master/gulpfile.js

Надеюсь, это имеет смысл.

Ответ 2

Протестировано с помощью Ionic2.rc2:

Строка по умолчанию принимает изображения под src/assets/img и помещает их под активы /img. Чтобы ссылаться на них из scss файлов, вам нужно перейти в папку:

background: url('../assets/img/sports-backgrounds.jpg');

Это единственный способ заставить меня работать, даже даже не оставляя "../", работая в браузере во время тестирования.

В то же время, если вы ссылаетесь на изображения из представления (html файлы), вот что работает для меня:

<img src="assets/img/logo-image-for-login-page.jpg"

Ионный 2 несколько неустойчив, поэтому есть еще некоторые причуды, которые нужно разгладить.

Удачи.

Ответ 3

Так как приложения Ionic2 ES2015 js соответствуют нормальным javascripts (ES5), вы должны иметь свои изображения и т.д. в папке www/build

Итак, создайте папку www/build/img и добавьте туда свои изображения. Тогда вы должны иметь доступ к нему как build/img/img1.png

EDIT

Добавление ответа на вопрос i don't undestand why you need to work the code in app folder but put insert the images into www folder

Ionic2 использует последние стандарты javascript, такие как ES2015 (ES6), Typescript (необязательно). Это позволяет нам писать код несколько иначе, чем в обычном javascript. С модулями классов и т.д.

Однако все же большинство браузеров не поддерживают эти новые стандарты javascript, поэтому Ionic использует концепцию transpiler, чтобы изменить новый код javascript в старый код javascript, чтобы браузеры могли понять.

Итак, с Ionic2, хотя код u в папке приложения в конечном итоге компилируется и запускается из папки www. Технически ваше ионное приложение по-прежнему работает в папке www, поэтому вам нужно добавить свои изображения в папку www.

Ответ 4

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

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

Ответ 5

Просто скопируйте свою папку img в папку www, и все готово!;)

Ответ 6

У меня была такая же проблема. Только вы должны создать папку img в www. → www/ img (поместите изображения в папку...)

Затем на странице (html) необходимо указать <img src="img/logo.png" />

Я тестирую браузер Chrome, приложение Android и App Ios. (Ionic 2.0.0-beta.11)

Привет!

Ответ 7

У меня была такая же проблема при использовании Ionic Beta Latest ionic @beta11.

Чтобы решить эту проблему, вы можете добавить абсолютный путь к изображениям в файле copy.config.js, который будет находиться в папке node_modules/@ionic/app-scripts/config

Вы можете добавить этот файл в определенную папку, указав путь источника (src) и назначения (dest).

Надеемся, что это поможет скопировать папки изображений в папку www/build/images

Спасибо заранее!

Ответ 8

<img src = "assects/img/abc.png"/>

img- file name

изображение должно храниться в объектах