vue-cli 中的图像导致问题。 Node-Express，mysql后端

Posted 2023-02-22

【中文标题】vue-cli 中的图像导致问题。 Node-Express，mysql后端

【英文标题】：Images in vue-cli causing issues. Node- Express, mysql backend

【发布时间】：2020-01-25 00:40:51

【问题描述】：

我有一些代码可以将图像上传到我服务器上的文件夹并将引用存储在 mysql 数据库中。开发中一切都很好，但尝试使用生产时我的图像未定义并且出现 404 错误结果。

我找到了文档，VUE Static Files 但我正在为这个设置而苦苦挣扎，因为我将另一台服务器设置为 nginx 代理服务器，所以我的所有流量都先到那里。我尝试过使用相对路径。将完整路径存储在我的数据库中，只是文件名，并尝试将其用于我的服务器并构建用于生产。例如，我试图弄清楚如何使用资产来容纳从后端上传时将存在的图像文件。

如果我只关注前端，我的后端服务器已将图像文件上传到 /dist/img/ 文件夹，我想在前端 vue 文件中引用它。

<template>
    <div class="ui link cards">
        <div class="card" id="custom-card">
            <div class="ui header">Today's Feed</div>
            <button class="ui button" id="sub-button" @click="showTodaysItems">Submit</button>
            <button class="ui button" @click="clearReport">Clear</button>
        </div>

            <hr>
            <div class="ui container response-modal modal"  id="report-modal" v-if="reportData.length >= 1">
                <div class="ui header">Todays Items</div>
                <i id="close-icon" class="big close icon right top" @click.prevent="onClose"></i>
                <div class="ui  devided items">
                    <div class="item" id="report-item" v-for="(item, index) in reportData" :key="`item-$index`"  @click="showItem(item)" >
                        <div>
                        item.description
                        </div>
                        <div>
                        item.notes
                        </div>
                        <div>
                        item.commodity
                        </div>
                        <div>
                        item.sampleDate
                        </div>
                        <div>
                        item.carrier
                        </div>
                        <div>
                        item.shipper
                        </div>
                         <div v-if="item.approve == 1">
                            Approved
                        </div>
                        <div v-else>
                            Rejected
                        </div>
                        <img class="ui tiny image" :src="getImageUrl(item.image)">
                    </div>

                </div>

            </div>
    </div>
</template>

<script>
    const API_REPORTS_ENDPOINT = "localhost/api/reports/";
    import axios from 'axios';
    const todaysDate = new Date();
    let dd = String(todaysDate.getDate()).padStart(2, '0');
    let mm = String(todaysDate.getMonth() + 1).padStart(2, '0');
    let yyyy = todaysDate.getFullYear();
    var todayFormatedDate = yyyy + "-" + mm + "-" + dd;
export default 
    data() 
        return 
            today: 
                todaysDate: todayFormatedDate,
            , 
            reportData: [],
            showSelectedTodaysItems: false,
            selectedItem: ,
        
    ,
    name: 'reports',
    methods: 
        showTodaysItems(event) 
            axios.post(API_REPORTS_ENDPOINT + 'todaysFeed',
                    this.today,
                     headers: 
                        'Content-type' : 'application/json',
                    
                    ).then(response => 
                        this.reportData = response.data.data;
                ).catch(error => console.log(error)); 
        ,
        showItem(i) 
            this.selectedItem = i;
            this.showSelectedTodaysItems = true;
        ,
        closeTodaysItems() 
            this.selectedItem = ;
            this.showSelectedTodaysItems = false;
        ,
        clearReport() 
            this.reportData = ;
        ,
        onClose() 
            this.reportData = ;
            this.showSelectedRangeItems = false;
        ,
        getImageUrl(image) 
            return require('../../../public/images/'+ image)
        
    ,

</script>

我的问题是我需要在开发中工作的图像文件，但一切都被缩小并移动到生产中，我不完全理解如何根据文档解决这个问题，我尝试过使用 '/assets /' 这样，使用基本网址，但它没有多大意义，有没有更简单的方法来处理这个。

【问题讨论】：

作为@Phil 回复的补充。这对 Vue 代码有帮助，我需要为 express static 添加一个引用，因为我使用节点来为生产中的站点提供服务。添加 app.use('/img', express.static(__dirname + '/img'));加上下面的 Vue 代码解决了这个问题。感谢您的帮助。

【参考方案1】：

这个问题是一个由两部分组成的问题。 @Phil 在 vue 方面的帮助非常棒。需要在 Node/Express 中添加一行代码，以便在后端公开图像。

app.use('/img', express.static(__dirname + '/img'));

完成这两个图像后，这些图像都可以在生产中使用了。

【参考方案2】：

如果您的图像在public 目录中，则不需要require，您可以直接引用它们，因为public 目录中的所有内容都按原样捆绑。

例如，将BASE_URL 添加到您的数据属性...

data() 
  return 
    publicPath: process.env.BASE_URL,
    // etc
  

在你的模板中

<img class="ui tiny image" :src="`$publicPathimages/$item.image`">

见https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder

---

仅供参考，在模板中调用 getImageUrl() 这样的方法效率非常低，应尽可能避免。