Не удается загрузить изображения из вложенных vue компонентов

Question

Я создал проект с использованием PHPStorm, поэтому все файлы и папки были сгенерированы.

Итак, у меня есть несколько вложенных компонентов и по какой-то странной причине просто не загружаются на страницу. Я пробовал различные варианты:

assets /assets ../assets /../assets ../../assets ... и т. Д.

Вот структура папок:

Слайдер. vue находится внутри Home. vue и вот код для слайдера:

<template>
    <div>
        <div v-bind:key="data.id"  class="carousel container" v-for="data in todos" v-html="data.content"></div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                todos:
                    [
                        {
                            id: 1,
                            content: `
                        <div>
                            <div>
                                <h3>Overview</h3>
                            </div>
                            <img class="lozad mob" alt="Dashboard Overview" src="/assets/browser_overview--mobile.png" data-loaded="true">
                            <img class="lozad mid" alt="Dashboard Overview" data-src="../../assets/browser_overview--mid.png" src="../../assets/browser_overview--mid.png" data-loaded="true">
                            <img class="lozad large" alt="Dashboard Overview" data-src="../../assets/browser_overview--large.png" src="../../assets/browser_overview--large.png" data-loaded="true">
                        </div>
                        <div>
                            <p>
                                Text
                            </p>
                        </div>
                    `
                        }
                    ],
                interval: null,
                soonTodo: [
                    {
                        id: 2,
                        content: `
                        <div>
                            <div>
                                <h3>Popup</h3>
                            </div>
                            <img class="lozad mob" alt="Dashboard Popup" data-src="../assets/browser_popup--mobile.png" src="../assets/browser_popup--mobile.png" data-loaded="true">
                            <img class="lozad mid" alt="Dashboard Popup" data-src="../assets/browser_popup--mid.png" src="../assets/browser_popup--mid.png" data-loaded="true">
                            <img class="lozad large" alt="Dashboard Popup" data-src="../assets/browser_popup--large.png" src="../assets/browser_popup--large.png" data-loaded="true">
                        </div>
                        <div>
                            <p>
                                Text
                            </p>
                        </div>

                    `,
                    },
                ]
            }
        },
        created() {
            let i = 0;
            this.interval = setInterval(() => {
                this.todos = [];
                if (this.soonTodo.length) {
                    this.todos.push(this.soonTodo[i]);
                    ++i;
                    if (i == this.soonTodo.length) {
                        i = 0;
                    }
                } else {
                    clearInterval(this.interval);
                }
            }, 9000)
        }
    }
</script>

Answer 1

Вы помещаете весь свой контент в виде HTML строк вместо использования шаблона Vue. Следовательно, Vue не компилирует его и не преобразует ваши src пути, как обычно. В этом случае вы можете переместить все изображения из папки /src/assets в /public. Я бы предпочел иметь папку /public/images и помещать их туда.

Теперь вы можете изменить src на /images/your_image.jpg, чтобы заставить это работать. (Примечание: обычный src, а не :src).

Примечание: https://cli.vuejs.org/guide/html-and-static-assets.html#the -publi c -folder в случае развертывания по пути домена а не root (/).

Answer 2

Можете ли вы попробовать заменить src на :src?

Upd.

Вы можете попробовать добавить в веб-пакет этот конфиг:

const path = require('path');

...

resolve: {
    alias: {
        '@': path.resolve(__dirname, '../'),
    }
},

И тогда вы можете использовать этот путь:

<img :src="@/assets/browser_overview--mid.png">

@ - должен ссылаться на ваш root каталог проекта.