Проект Vue cli 3, динамический src в пути к изображениям не работает - PullRequest
Новая
       29

Проект Vue cli 3, динамический src в пути к изображениям не работает

0 голосов
/ 01 февраля 2019

Я ссылаюсь на URL изображения в компоненте vue, например 

<img alt="Vue logo" src="~statics/reports/logo.png">

, это работает

, но при попытке 

<img alt="Vue logo" :src="getURL()">


data() {
    return { imgPath: "~statics/reports/logo.png" };
  },

  methods: {

    getURL() {
        // 

      // console.log(path)
      return (this.imgPath)
    }
  },

этотерпит неудачу

Моя структура папок enter image description here

В первом случае путь разрешается до 

http://localhost:8081/img/logo.82b9c7a5.png

и автоматически обрабатывается устройством devсервер

Путь не разрешен во втором случае, он остается http://localhost:8081/~statics/reports/logo.png

Я использую сгенерированный по умолчанию конфиг 3 для веб-пакета.

Я не хочуиспользуйте относительные пути для всех изображений, например ../images/, поскольку это делает его более подробным.Я пробовал требовать (pathVariable), который тоже не работает Пожалуйста, помогите с разрешением пути img, когда URL-адрес является динамическим, т. Е. Имя ресурса поступает с сервера, и я добавляю путь в метод или вычисляется и использую: src dynamicbinding для его обслуживания

1 Ответ

0 голосов
/ 01 февраля 2019

Второй способ не работает, потому что "~" пытается получить этот ресурс из node_modules.Вы можете прочитать больше об обработке активов здесь: https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports.

Чтобы исправить это, просто используйте require как ниже: 

data() {
  return {
    imgPath: require('@/statics/logo.png')
  }
}

.. или непосредственно в шаблоне: 

<img alt="Vue logo" :src="require('@/statics/logo.png')">
...