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 查看你的代码来捆绑和移动资产到./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')]"/>