Parcel JS VUE 动态图片 :src [英] Parcel JS VUE dynamic images :src

问题描述

带有parcel bundler的Vue js无法加载动态图像

Vue js with parcel bundler cannot load dynamic images

<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 其正常工作并将路径更改为散列

not working give us 404 when using relative path its working properly and changing path to hashed

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

我们该如何解决?

推荐答案

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

Slightly old, but this is how I just did it, maybe it will help.

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

Imagine you're trying to do the following, where some parts of the path are dynamic:

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

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

You would naturally think to do something like:

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

并期望它呈现为:

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

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

..But because parclejs looks at your code to bundle and move assets into ./dist it won't see the dynamic image, so it won't get moved.

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

A solution is to import all the images, then use that to access the real path:

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

export default {
  data() {
    return {
      images,

  // ...

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

images variable will contain the mapping to the actual image:

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

然后你可以像这样使用:

which you can then use like this:

<img :src="images[item.icon + (item.active ? 'Active' : 'Inactive')]"/>

这篇关于Parcel JS VUE 动态图片 :src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！