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

Question

Я новичок в ионном 2, и я пытаюсь вставить изображение, но я не понимаю истинный путь. внутри приложения файла/страниц/получения стартером/посаживания started.html

<ion-content padding class="getting-started"> 
    <ion-card> 
    <ion-card-content> 
     <img src="img1.png" alt=""> 
     <img src="img/img1.png" alt=""> 
     <img src="../img/img1.png" alt=""> 
    </ion-card-content> 
    </ion-card> 
</ion-content> 

Создать папку приложения/IMG и вставить файл img1.png внутри него. и тот же файл внутри папки app/pages/get-started.

Таким образом, это должно быть легко, но ничего не может найти внутри ионных документов.

Благодаря

Answer 1

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

Это как мой gulpfile.js lookslike: 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); 
    } 
); 
}); 

В качестве альтернативы, вы можете использовать этот глоток плагин 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

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

Answer 2

Поскольку Ionic2 приложения ES2015 удовлетворяет требования вниз расслоение плотной нормальным 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), машинопись (Необязательно). Это позволяет нам писать код несколько иначе, чем в обычном javascript. С классами классов и т. Д.

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

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

Answer 3

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

изображения должны идти на файловом собрата для создания внутри папки WWW
- WWW
- построить
- IMG

Answer 4

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

Answer 5

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

Затем в страницу (HTML) ваш должен ссылаться <img src="img/logo.png" />

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

С уважением!

Answer 6

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

---

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

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

Надеется, что это помогает для копирования папки изображений для WWW/создание/изображения папка

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

Answer 7

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

img- file name 

изображение должно быть сохранено в assects

Answer 8

Испытано с Ionic2.rc2:

сборки по умолчанию принимает изображения под Src/активов/IMG и ставит его под активы/IMG. Для того, чтобы ссылаться на них из SCSS файлов вам нужно идти в папку:

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

Это единственный способ, которым я получил его на работу, даже даже Опуская «../» работал в браузере во время тестирования ,

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

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

Ионные 2 несколько нестабильны, так что вы еще какие-то странности, что необходимо выгладить.

Удачи.