vue.js <img src>

227

26 сентября 2018, 23:00

Изучаю компоненты vue.js (вместе с Laravel) и наткнулся на проблему: не отрисовывается картинка. Вставляю путь <img src="/path/to/img"> и в браузере в debug выдаёт 404 не находит картинку... Без компонента всё ок, в чём может быть проблема?

Код компонента:

<template>
<div class="card main-card">
    <div class="card-header main-card-header">Ваш Аккаунт</div>
    <div class="row no-gutters">
        <div class="col-sm-4">
            <div class="purses">
                <div class="row">
                        <img src="/public/img/1.jpg">
                    <div>
                        Тест
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
export default {
}
</script>
<style>
/*тут много стилей*/
</style>

Answer 1

Самый правильный способ использовать картинки - это подключить в проект file-loader https://github.com/webpack-contrib/file-loader (тут подробное описание), тогда ты сможешь не хардкодить путь к картинке (который может поменять со временем), а просто импортить ее

<template>
  <img :src="image"
</template>
<script>
import image from 'relative/path/to/image'; //file-loader вернет путь к картинке
export default {
  data() {
    return {
      image
    };
  }
};

Answer 2

:src="'/path/to/img'"

Либо вынесите в переменную:

<template>
    <img :src="image"
</template>
<script>
export default {
    data() {
        return {
            image: '/path/to/img'
        };
    }
};
</script>