vue.js - Parcel JS VUE 动态图片 :src

Question

带有包裹捆绑器的Vue js无法加载动态图像

<li
    class="list-group-item"
    v-for="(element, index) in carouselImages"
    :key="index">
    <img
         v-if="carouselImages.length"
         class="e-carousel-image"
         :src="element.image.filename" />
    <el-button
               type="danger"
               @click="removeImage(element._id)">X</el-button>
</li>

使用相对路径时不工作给我们 404 其正常工作并将路径更改为散列

src="../../../assets/uploads/carousel-1534888549715.jpg"

我们如何解决？

Answer 1

有点旧，但我就是这样做的，也许会有所帮助。

假设您正在尝试执行以下操作，其中路径的某些部分是动态的:

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

你自然会想到做这样的事情:

<img :src="`../../assets/img/${item.icon}${item.active ? 'Active' : 'Inactive'}.png`"/>

并期望它呈现为:

<img src="homeActive.fbba0284.png"/>

..但是因为 parclejs 会查看您的代码以将 Assets 捆绑并移动到 ./dist它不会看到动态图像，所以它不会被移动。

一种解决方案是导入所有图像，然后使用它来访问真实路径:

<script>
import images from '../../assets/img/*.png';

export default {
  data() {
    return {
      images,

  // ...

images变量将包含到实际图像的映射:

{
    ...
    "homeActive": "/homeActive.fbba0284.png",
    "homeInactive": "/homeInactive.cf1229b4.png",
    ...
}

然后您可以像这样使用它:
<img :src="images[item.icon + (item.active ? 'Active' : 'Inactive')]"/>