Передача и привязка img src из реквизита в Vue.js

Question

Я пытаюсь отобразить изображение с тегом img, используя путь от props для атрибута src.

Я попытался изменить путь с помощью @, используя весь путь с помощью src, добавив ../assets/ в компонент и передавая только имя файла (orange.png) в качестве реквизита. Я всегда получаю отображаемое по умолчанию сломанное изображение. При проверке в браузере путь кажется нормальным. Когда я отображаю изображение напрямую, я вижу, что путь разрешен к другому пути <img data-v-1212d7a4="" src="/img/orange.7b71a54c.png">.

---

Edit: Кроме того, я попробовал этот пост Не могу динамически передать относительный путь src для imgs в Vue.js + webpack , где использование <img :src="require(picture_src)" /> дается в качестве ответа. Это приводит к ошибке: Error in render: "Error: Cannot find module '../assets/orange.png'"

( Edit2: В конце концов, этот ответ сработал для меня, как описано в моем ответном сообщении.)
Та же ошибка возникает при использовании аналогичного метода webpack с использованием let images = require.context('../assets/', false, /\.png$/) в моей части скрипта, поскольку ответ на этот пост Невозможно динамически передать относительный путь src для imgs в Vue.js + webpack .

---

Я новичок в Vue.js, так что я точно не знаю, что происходит или как искать это, или это может не иметь никакого отношения к тому, что я первоначально пытаюсь.

Я могу отображать свое изображение, когда прохожу путь напрямую, как это

<img src="../assets/orange.png"/>

Теперь я на самом деле хотел бы передать его своему компоненту в подпорках, а затем, внутри компонента, отобразить его, читая путь из подпорок.

Компонент

<template>
  <div>
    <img :src=picture_src />
    <div class="pic_sub">{{pic_desc}}</div>
  </div>
</template>
<script>
export default {
  name: 'PictureCard',
  props: {
    picture_src: String,
    pic_desc: String
  }
}
</script>

Использование компонента:

<template>
  <div>
    <PictureCard pic_desc='some description text' picture_src='../assets/orange.png' />
  </div>
</template>

<script>
import PictureCard from './components/PictureCard.vue'
export default {
  name: 'app',
  components: {
    PictureCard
  }
}
</script>

Если это возможно, я хотел бы отобразить мой путь, который проходит через реквизиты компонента.

В противном случае мне бы хотелось узнать о некоторых других решениях, обходных путях или знаниях о лучших практиках в этом случае.

Answer 1

После некоторых исследований я понимаю, что моя проблема связана с веб-пакетом и разрешением путей к файлам.Я использовал измененную версию из этого ответа:
Динамические изображения Vue.js не работают
и этот ответ:
Невозможно динамически передать относительный путь src для imgs в Vue.js + webpack
Так как ссылка во втором ответе была мертва, вот активная ссылка на документацию require.context: https://webpack.js.org/guides/dependency-management/#requirecontext

Моя ошибка при попытке ответить по второй ссылкебыло то, что я вернул только orange.png в качестве пути, в то время как мне нужно было добавить ./ в начале.

Мой рабочий компонент изображения теперь выглядит следующим образом.

<template>
  <div>
    <img :src="resolve_img_url(picture_src)" />
    <div class="pic_sub">{{pic_desc}}</div>
  </div>
</template>
<script>
export default {
  name: 'PictureCard',
  props: {
    picture_src: String,
    pic_desc: String
  },
  methods: {
    resolve_img_url: function (path) {
      let images = require.context('../assets/', false, /\.png$|\.jpg$/)
      return images("./"+path)
    }
  }
}
</script>

Я отредактировал регулярное выражение, чтобы оно совпадало с окончаниями файлов .png и .jpg.Поэтому прохождение опоры теперь выглядит так

<PictureCard  picture_src='orange.png' pic_desc='some picture description'/>

Answer 2

Это сработало для меня

<img :src="require(`@/assets/img/${filename}`)">

, где filename передается как реквизит, например "myImage.png".

Убедитесь, что вы используете путь, специфичный для вашего проекта.

Источник: https://github.com/vuejs-templates/webpack/issues/450