Изображения в vue-cli вызывают проблемы.Node- Express, MySQL Бэкэнд

Question

У меня есть некоторый код, который загружает изображения в папку на моем сервере и сохраняет ссылку в базе данных mysql.Все было хорошо в разработке, но при попытке работать с производством мои изображения не определены, и появляются ошибки 404.

Я нашел документацию, Статические файлы VUE Но я борюсь с этой настройкой, так какУ меня есть другой сервер, настроенный как прокси-сервер NGINX, поэтому весь мой трафик идет туда первым.Я пытался использовать относительные пути.Сохранение полного пути в моей базе данных, только имя файла, и попытка вставить его на мой сервер и собрать для производства.Например, я пытаюсь выяснить, как использовать ресурсы для размещения файлов изображений, которые будут там при загрузке из серверной части.

Если я просто сфокусируюсь на внешнем интерфейсе, то мой внутренний сервер загрузил файл изображения в эту папку / dist / img /, и я воспользуюсь этим указателем в файлах внешнего интерфейса.

<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 /', как это, используя базовый URL, но это не имеет особого смысла, мог бы быть более простой способ справиться с этим.

Answer 1

Если ваши изображения находятся в каталоге public, вам не нужно require, вы можете ссылаться на них напрямую, так как все в каталоге public связано как есть.

Например,добавьте BASE_URL к своим свойствам данных ...

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

и в свой шаблон

<img class="ui tiny image" :src="`${publicPath}images/${item.image}`">

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

---

FYI,наличие вызовов методов типа getImageUrl() в ваших шаблонах очень неэффективно, и их следует по возможности избегать.