时间戳

首页 > 解决方案 > 无法从嵌套的 vue 组件加载图像

image - 无法从嵌套的 vue 组件加载图像

问题描述

我使用 PHPStorm 创建了一个项目，因此生成了所有文件和文件夹。

所以，我有一些嵌套的组件，出于某种奇怪的原因，只是没有加载到页面上。我尝试了各种：

assets /assets ../assets /../assets ../../assets ... 等等。

这是文件夹结构：

文件夹结构

Slider.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>

标签： imagevue.js

解决方案

您可以尝试替换src为:src吗？

更新。

您可以尝试将此配置添加到 webpack：

const path = require('path');

...

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

然后你可以使用这个路径：

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

@ - 应该引用到您的根项目目录。

推荐阅读