Vue js не удалось загрузить изображения

161
22 мая 2018, 20:00

Начинаю осваивать vue.js. Решил сделать Простое приложения для фильтрации данных в папке src создал папку data в ней data.js

кусок кода:

const data = [ 
	{ 
	name: 'vue js', 
  //logo: '../assets/vue-logo.png', 
	logo: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png', 
	stack: [ 'framework', 'frontend', 'web', 'mobile' ] 
	}, 
  { 
  	name: 'react js', 
  	logo: './assets/react.png', 
  	stack: [ 'framework', 'frontend', 'web', 'mobile' ] 
  }, 
 { 
name: 'Slim Framework', 
logo: '../assets/slim.png', 
stack: [ 'backend','framework', 'web' ] 
} 
]; 
export default data;

я закачал картинки в папку assets

если прописываю путь картинки в таком формате

logo: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png',

то картинка выводится

а если такой формат

logo: '../assets/vue-logo.png',

Не пойму почему не выводятся картинки

файлы проекта

Просвятите

Answer 1

Если у вас сервер смотрит в директорию бандла, допустим, dist, а ваша директория assets на уровни с dist, то так как браузер смотрит в dist и однозначно браузер не будет видеть assets.
Вам нужно поместить директорию assets в директорию с dist или при сборке копировать ее туда. Если поместите assets с бандлом приложения вместе, то обращайтесь к картинкам /assets или assets

READ ALSO
Архитектура простого Single Page Application

Архитектура простого Single Page Application

Делаю дипломВопрос трезво ли я рассуждаю? Что можете посоветовать?

181
Восстановление Данных Ruby/JS/Oracle

Восстановление Данных Ruby/JS/Oracle

Помогите в поиске решение проблемы

204
Задача на Javascript [закрыт]

Задача на Javascript [закрыт]

Создайте 50-значное поле со случайными номерами от -50 до 100 (включая предельные значения) и распечатайте егоСоздайте новое поле с именем sortedNumber,...

166
Авторизация через вк, используя passport.js

Авторизация через вк, используя passport.js

Пытаюсь реализовать авторизацию пользователя на сейте через соцсеть ВК

198