主页 / 问题 / 1568949
Accepted
CriticalError
Asked:2024-02-26 01:14:32 +0800 CST2024-02-26 01:14:32 +0800 CST

Vue.js，无法引用文件

  • 772

问题是，如果我手动将此路径写入属性，那么一切都会工作，但我希望一切都通过 v-bind 工作，但在这种情况下，它会在控制台中向我写入 Not Found 。我尝试将此文件转储到所有项目文件夹中，但没有任何结果，所以我根本不明白出了什么问题。（我对网络完全是零，所以也许问题很明显）。我没有更改配置文件，我通过 vue-cli 创建了它们

<template>
    <div class="cards_container">
        <div v-for="item in items" class="card" v-bind:style="{ backgroundImage: 'url(' + item.path + ')' }">
        </div>
    </div>
</template>
    
<script>
export default
{
    props:{
        items:{
            type:Array,
            required:true
        }
        
    }
}
</script>
    
<style>
    
</style>

item.path 中的路径如下所示 ./images/pictures/1.jpg

项目结构

项目结构

node.js

1 个回答

  1. Best Answer

    App.vue 文件不是浏览器可以理解的文件。因此它被编译并从中获得编译文件。它们不会位于根文件夹中，因此./images/pictures/1.jpg将无法正确计算相对路径。

    为了克服此错误，必须使用从站点根开始的绝对路径，而不是相对路径。

    哪个文件夹是站点的根文件夹？如果是catalog，那么绝对路径就是/src/images/pictures/1.jpg。如果public，则在当前配置下，该站点将无法访问包含图片的文件夹。

    • 0

相关问题