ссылка на ссылку src будет отображаться на плитке Bulma, но не будет отображаться мой image.png - PullRequest
Новая
       8

ссылка на ссылку src будет отображаться на плитке Bulma, но не будет отображаться мой image.png

0 голосов
/ 06 января 2019

Я столкнулся с этой странной ошибкой, которую я получаю, когда мое изображение, находящееся в папке в моем каталоге, не будет распознано. После отладки на вкладке Network появляется ошибка Cannot GET /images/myImage.png.

Однако, если я добавлю случайную ссылку из Интернета в атрибут src в img, то это сработает (появится изображение).

Почему это происходит и как я могу это исправить? 

import React from 'react';

const Tiles = () => {
    return(
        <div className="tile">
            <div className="tile is-vertical is-8">
                <div className="tile">
                    <div className="tile is-parent is-vertical">
                        <article className="tile is-child notification">
                            <p className="title">Vertical...</p>
                            <p className="subtitle">Top tile</p>
                        </article>
                        <article className="tile is-child notification">
                            <p className="title">...tiles</p>
                            <p className="subtitle">Bottom tile</p>
                        </article>
                    </div>
                    <div className="tile is-parent">
                        <article className="tile is-child notification">
                            <p className="title">Middle tile</p>
                            <p className="subtitle">With an image</p>
                            <figure className="image is-4by3">
                                <img src="https://bulma.io/images/placeholders/640x480.png"/>
                            </figure>
                        </article>
                    </div>
                </div>
                <div className="tile">
                    <article className="tile is-child notification">
                        <p className="title">Wide tile</p>
                        <p className="subtitle">Aligned with the right tile</p>
                        <div className="content">
                            {/* Here's the problem */}
                            <img src="../../images/myImage.png" alt="CPI pic"/>
                        </div>
                    </article>
                </div>
            </div>
            <div className="tile is-parent">
                <article className="tile is-child notification">
                    <div className="content">
                        <p className="title">Tall tile</p>
                        <p className="subtitle">With even more content</p>
                        <div className="content">
                        </div>
                    </div>
                </article>
            </div>
        </div>
    );
}

export default Tiles;

1 Ответ

0 голосов
/ 06 января 2019

Изображение src не передается при объединении вашего кода.

Когда вы указываете внешний src, такой как https://bulma.io/images/placeholders/640x480.png, у вас есть полный URL, не зависящий от вашей локальной файловой структуры, который всегда будет работать.

В случае относительного пути, например ../../images/myImage.png, это означает, что ваше приложение должно выглядеть на 2 уровня выше для папки с именем images. Источник не относится к местоположению файла вашего компонента. Src будет таким же в вашем конечном js-файле, где все ваши модули существуют, и будет ../../images/myImage.png Так что это будет относительно текущего URL, а не файловой системы.

Чтобы решить, что вы можете, например, использовать абсолютный путь, например /app/images/myImage.png, в зависимости от того, где ваше приложение размещено на сервере.

Если вы используете веб-пакет, вы можете запросить ваши изображения относительно вашего файла компонента, например <img src={require('../../images/myImage.png')} /> в этом случае ваш файл изображения будет импортирован как модуль js и в зависимости от конфигурации веб-пакета может быть перенесен в строку base64 или нет.

...